@atlaskit/editor-plugin-media 8.4.19 → 8.5.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-media
 
+## 8.5.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 8.5.0
+
+### Minor Changes
+
+- [`6ecbe7ee10388`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6ecbe7ee10388) -
+  Started an experiment on image editing, added a button in the floating toolbar
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 8.4.19
 
 ### Patch Changes

package/dist/cjs/mediaPlugin.js

@@ -331,9 +331,7 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
       }));
     },
     secondaryToolbarComponent: function secondaryToolbarComponent(_ref11) {
-      var editorView = _ref11.editorView,
-        eventDispatcher = _ref11.eventDispatcher,
-        disabled = _ref11.disabled;
+      var disabled = _ref11.disabled;
       return /*#__PURE__*/_react.default.createElement(_ToolbarMedia.default, {
         isDisabled: disabled,
         isReducedSpacing: true,
@@ -341,8 +339,7 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
       });
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref12) {
-        var formatMessage = _ref12.formatMessage;
+      quickInsert: function quickInsert() {
         return [];
       },
       floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
@@ -356,6 +353,7 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
           allowLinking: options && options.allowLinking,
           allowAdvancedToolBarOptions: options && options.allowAdvancedToolBarOptions,
           allowAltTextOnImages: options && options.allowAltTextOnImages,
+          allowImageEditing: options && options.allowImageEditing,
           allowImagePreview: options && options.allowImagePreview,
           altTextValidator: options && options.altTextValidator,
           fullWidthEnabled: options && options.fullWidthEnabled,

package/dist/cjs/nodeviews/mediaNodeView/index.js

@@ -19,9 +19,7 @@ var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 var _selectionBasedNodeView = require("@atlaskit/editor-common/selection-based-node-view");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
-var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _mediaClient = require("@atlaskit/media-client");
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _helpers = require("../../pm-plugins/commands/helpers");
 var _mediaCommon = require("../../pm-plugins/utils/media-common");
 var _media = _interopRequireDefault(require("./media"));
@@ -77,22 +75,6 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
         }, true)(_this.view.state, _this.view.dispatch);
       }
     });
-    (0, _defineProperty2.default)(_this, "getMaxCardDimensions", function (editorWidth) {
-      if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
-        var mediaSingleNodeParent = _this.getMediaSingleNode(_this.getPos);
-        if (mediaSingleNodeParent) {
-          var maxWidth = _this.getMaxWidthFromMediaSingleNode(mediaSingleNodeParent, editorWidth === null || editorWidth === void 0 ? void 0 : editorWidth.width);
-          return {
-            width: "".concat(maxWidth, "px"),
-            height: '100%'
-          };
-        }
-      }
-      return {
-        width: '100%',
-        height: '100%'
-      };
-    });
     (0, _defineProperty2.default)(_this, "renderMediaNodeWithState", function (contextIdentifierProvider) {
       return function (_ref2) {
         var _this$reactComponentP;
@@ -116,15 +98,18 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
         }
         width = width || _mediaSingle.DEFAULT_IMAGE_WIDTH;
         height = height || _mediaSingle.DEFAULT_IMAGE_HEIGHT;
-        var pluginInjectionApi = _this.reactComponentProps.pluginInjectionApi;
 
         // mediaSingle defines the max dimensions, so we don't need to constrain twice.
-        var maxDimensions = _this.getMaxCardDimensions(editorWidth);
+        var maxDimensions = {
+          width: "100%",
+          height: "100%"
+        };
         var originalDimensions = {
           width: width,
           height: height
         };
         var isSelectedAndInteracted = _this.nodeInsideSelection() && interactionState !== 'hasNotHadInteraction';
+        var pluginInjectionApi = _this.reactComponentProps.pluginInjectionApi;
         return /*#__PURE__*/_react.default.createElement(_media.default, {
           api: pluginInjectionApi,
           view: _this.view,
@@ -155,44 +140,6 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
   }
   (0, _inherits2.default)(MediaNodeView, _SelectionBasedNodeVi);
   return (0, _createClass2.default)(MediaNodeView, [{
-    key: "getMediaSingleNode",
-    value: function getMediaSingleNode(getPos) {
-      var pos = getPos();
-      if (typeof pos !== 'number') {
-        return null;
-      }
-      var $pos = this.view.state.doc.resolve(pos);
-
-      // The parent of the media node should be mediaSingle
-      if ($pos.parent && $pos.parent.type.name === 'mediaSingle') {
-        return $pos.parent;
-      }
-      return null;
-    }
-  }, {
-    key: "getMaxWidthFromMediaSingleNode",
-    value: function getMaxWidthFromMediaSingleNode(mediaSingleNode, containerWidth) {
-      var _mediaSingleNode$attr = mediaSingleNode.attrs,
-        widthAttr = _mediaSingleNode$attr.width,
-        widthTypeAttr = _mediaSingleNode$attr.widthType,
-        layoutAttr = _mediaSingleNode$attr.layout;
-      if (widthAttr && widthTypeAttr === 'pixel') {
-        return widthAttr;
-      }
-      // on SSR mode, containerWidth from widthPluginState can be 0
-      if (!containerWidth) {
-        switch (layoutAttr) {
-          case 'full-width':
-            return _editorSharedStyles.akEditorFullWidthLayoutWidth;
-          case 'wide':
-            return _editorSharedStyles.akEditorCalculatedWideLayoutWidth;
-          default:
-            return _editorSharedStyles.akEditorDefaultLayoutWidth;
-        }
-      }
-      return containerWidth;
-    }
-  }, {
     key: "createDomRef",
     value: function createDomRef() {
       var domRef = document.createElement('div');

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

@@ -19,6 +19,7 @@ var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
 var _state2 = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _imageCrop = _interopRequireDefault(require("@atlaskit/icon-lab/core/image-crop"));
 var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
 var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
 var _growDiagonal = _interopRequireDefault(require("@atlaskit/icon/core/grow-diagonal"));
@@ -271,6 +272,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     allowAltTextOnImages = options.allowAltTextOnImages,
     allowMediaInline = options.allowMediaInline,
     allowMediaInlineImages = options.allowMediaInlineImages,
+    allowImageEditing = options.allowImageEditing,
     allowImagePreview = options.allowImagePreview,
     isViewOnly = options.isViewOnly,
     allowPixelResizing = options.allowPixelResizing,
@@ -550,12 +552,33 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           supportsViewMode: true
         });
       }
-      // Preview Support
-      if (allowImagePreview) {
+      // Image Editing Support
+      if (allowImageEditing && (0, _expValEquals.expValEquals)('platform_editor_add_image_editing', 'isEnabled', true)) {
         var _mediaNode$attrs;
         var _selectedMediaSingleNode = (0, _utils2.getSelectedMediaSingle)(state);
         var mediaNode = _selectedMediaSingleNode === null || _selectedMediaSingleNode === void 0 ? void 0 : _selectedMediaSingleNode.node.content.firstChild;
         if (!(0, _mediaSingle.isVideo)(mediaNode === null || mediaNode === void 0 || (_mediaNode$attrs = mediaNode.attrs) === null || _mediaNode$attrs === void 0 ? void 0 : _mediaNode$attrs.__fileMimeType)) {
+          toolbarButtons.push({
+            id: 'editor.media.edit',
+            testId: 'image-edit-toolbar-button',
+            type: 'button',
+            icon: _imageCrop.default,
+            title: intl.formatMessage(_messages.default.imageEdit),
+            onClick: function onClick() {
+              // TODO: EDITOR-3716 - Implement image editing logic
+              // console.log('Image editing clicked');
+              return true;
+            },
+            supportsViewMode: false
+          });
+        }
+      }
+      // Preview Support
+      if (allowImagePreview) {
+        var _mediaNode$attrs2;
+        var _selectedMediaSingleNode2 = (0, _utils2.getSelectedMediaSingle)(state);
+        var _mediaNode = _selectedMediaSingleNode2 === null || _selectedMediaSingleNode2 === void 0 ? void 0 : _selectedMediaSingleNode2.node.content.firstChild;
+        if (!(0, _mediaSingle.isVideo)(_mediaNode === null || _mediaNode === void 0 || (_mediaNode$attrs2 = _mediaNode.attrs) === null || _mediaNode$attrs2 === void 0 ? void 0 : _mediaNode$attrs2.__fileMimeType)) {
           var _pluginInjectionApi$c2;
           toolbarButtons.push({
             id: 'editor.media.viewer',
@@ -638,10 +661,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
   } else {
     // Preview Support
     if (allowAdvancedToolBarOptions && allowImagePreview) {
-      var _mediaNode$attrs2;
-      var _selectedMediaSingleNode2 = (0, _utils2.getSelectedMediaSingle)(state);
-      var _mediaNode = _selectedMediaSingleNode2 === null || _selectedMediaSingleNode2 === void 0 ? void 0 : _selectedMediaSingleNode2.node.content.firstChild;
-      if (!(0, _mediaSingle.isVideo)(_mediaNode === null || _mediaNode === void 0 || (_mediaNode$attrs2 = _mediaNode.attrs) === null || _mediaNode$attrs2 === void 0 ? void 0 : _mediaNode$attrs2.__fileMimeType)) {
+      var _mediaNode2$attrs;
+      var _selectedMediaSingleNode3 = (0, _utils2.getSelectedMediaSingle)(state);
+      var _mediaNode2 = _selectedMediaSingleNode3 === null || _selectedMediaSingleNode3 === void 0 ? void 0 : _selectedMediaSingleNode3.node.content.firstChild;
+      if (!(0, _mediaSingle.isVideo)(_mediaNode2 === null || _mediaNode2 === void 0 || (_mediaNode2$attrs = _mediaNode2.attrs) === null || _mediaNode2$attrs === void 0 ? void 0 : _mediaNode2$attrs.__fileMimeType)) {
         var _pluginInjectionApi$c3;
         toolbarButtons.push({
           id: 'editor.media.viewer',
@@ -688,6 +711,29 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       (0, _utils2.updateToFullHeightSeparator)(toolbarButtons);
       toolbarButtons.push((0, _comments.commentButton)(intl, state, pluginInjectionApi, onCommentButtonMount));
     }
+    if (allowAdvancedToolBarOptions && allowImageEditing && (0, _expValEquals.expValEquals)('platform_editor_add_image_editing', 'isEnabled', true)) {
+      var _mediaNode3$attrs;
+      var _selectedMediaSingleNode4 = (0, _utils2.getSelectedMediaSingle)(state);
+      var _mediaNode3 = _selectedMediaSingleNode4 === null || _selectedMediaSingleNode4 === void 0 ? void 0 : _selectedMediaSingleNode4.node.content.firstChild;
+      if (!(0, _mediaSingle.isVideo)(_mediaNode3 === null || _mediaNode3 === void 0 || (_mediaNode3$attrs = _mediaNode3.attrs) === null || _mediaNode3$attrs === void 0 ? void 0 : _mediaNode3$attrs.__fileMimeType)) {
+        toolbarButtons.push({
+          id: 'editor.media.edit',
+          testId: 'image-edit-toolbar-button',
+          type: 'button',
+          icon: _imageCrop.default,
+          title: intl.formatMessage(_messages.default.imageEdit),
+          onClick: function onClick() {
+            // TODO: EDITOR-3716 - Implement image editing logic
+            // console.log('Image editing clicked');
+            return true;
+          },
+          supportsViewMode: false
+        }, {
+          type: 'separator',
+          supportsViewMode: false
+        });
+      }
+    }
     return toolbarButtons;
   }
 };

package/dist/es2019/mediaPlugin.js

@@ -329,8 +329,6 @@ export const mediaPlugin = ({
       }));
     },
     secondaryToolbarComponent({
-      editorView,
-      eventDispatcher,
       disabled
     }) {
       return /*#__PURE__*/React.createElement(ToolbarMedia, {
@@ -340,9 +338,7 @@ export const mediaPlugin = ({
       });
     },
     pluginsOptions: {
-      quickInsert: ({
-        formatMessage
-      }) => [],
+      quickInsert: () => [],
       floatingToolbar: (state, intl, providerFactory) => {
         var _api$editorViewMode, _api$editorViewMode$s;
         return floatingToolbar(state, intl, {
@@ -354,6 +350,7 @@ export const mediaPlugin = ({
           allowLinking: options && options.allowLinking,
           allowAdvancedToolBarOptions: options && options.allowAdvancedToolBarOptions,
           allowAltTextOnImages: options && options.allowAltTextOnImages,
+          allowImageEditing: options && options.allowImageEditing,
           allowImagePreview: options && options.allowImagePreview,
           altTextValidator: options && options.altTextValidator,
           fullWidthEnabled: options && options.fullWidthEnabled,

package/dist/es2019/nodeviews/mediaNodeView/index.js

@@ -5,9 +5,7 @@ import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-comm
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
-import { akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { getAttrsFromUrl } from '@atlaskit/media-client';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { updateCurrentMediaNodeAttrs } from '../../pm-plugins/commands/helpers';
 import { isMediaBlobUrlFromAttrs } from '../../pm-plugins/utils/media-common';
 // Ignored via go/ees005
@@ -57,22 +55,6 @@ class MediaNodeView extends SelectionBasedNodeView {
         }, true)(this.view.state, this.view.dispatch);
       }
     });
-    _defineProperty(this, "getMaxCardDimensions", editorWidth => {
-      if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
-        const mediaSingleNodeParent = this.getMediaSingleNode(this.getPos);
-        if (mediaSingleNodeParent) {
-          const maxWidth = this.getMaxWidthFromMediaSingleNode(mediaSingleNodeParent, editorWidth === null || editorWidth === void 0 ? void 0 : editorWidth.width);
-          return {
-            width: `${maxWidth}px`,
-            height: '100%'
-          };
-        }
-      }
-      return {
-        width: '100%',
-        height: '100%'
-      };
-    });
     _defineProperty(this, "renderMediaNodeWithState", contextIdentifierProvider => {
       return ({
         width: editorWidth,
@@ -103,17 +85,20 @@ class MediaNodeView extends SelectionBasedNodeView {
         }
         width = width || DEFAULT_IMAGE_WIDTH;
         height = height || DEFAULT_IMAGE_HEIGHT;
-        const {
-          pluginInjectionApi
-        } = this.reactComponentProps;
 
         // mediaSingle defines the max dimensions, so we don't need to constrain twice.
-        const maxDimensions = this.getMaxCardDimensions(editorWidth);
+        const maxDimensions = {
+          width: `100%`,
+          height: `100%`
+        };
         const originalDimensions = {
           width,
           height
         };
         const isSelectedAndInteracted = this.nodeInsideSelection() && interactionState !== 'hasNotHadInteraction';
+        const {
+          pluginInjectionApi
+        } = this.reactComponentProps;
         return /*#__PURE__*/React.createElement(MediaNode, {
           api: pluginInjectionApi,
           view: this.view,
@@ -144,41 +129,6 @@ class MediaNodeView extends SelectionBasedNodeView {
       });
     });
   }
-  getMediaSingleNode(getPos) {
-    const pos = getPos();
-    if (typeof pos !== 'number') {
-      return null;
-    }
-    const $pos = this.view.state.doc.resolve(pos);
-
-    // The parent of the media node should be mediaSingle
-    if ($pos.parent && $pos.parent.type.name === 'mediaSingle') {
-      return $pos.parent;
-    }
-    return null;
-  }
-  getMaxWidthFromMediaSingleNode(mediaSingleNode, containerWidth) {
-    const {
-      width: widthAttr,
-      widthType: widthTypeAttr,
-      layout: layoutAttr
-    } = mediaSingleNode.attrs;
-    if (widthAttr && widthTypeAttr === 'pixel') {
-      return widthAttr;
-    }
-    // on SSR mode, containerWidth from widthPluginState can be 0
-    if (!containerWidth) {
-      switch (layoutAttr) {
-        case 'full-width':
-          return akEditorFullWidthLayoutWidth;
-        case 'wide':
-          return akEditorCalculatedWideLayoutWidth;
-        default:
-          return akEditorDefaultLayoutWidth;
-      }
-    }
-    return containerWidth;
-  }
   createDomRef() {
     const domRef = document.createElement('div');
     if (this.reactComponentProps.mediaOptions && this.reactComponentProps.mediaOptions.allowMediaSingleEditable) {

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

@@ -9,6 +9,7 @@ import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-che
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { contains, findParentNodeOfType, hasParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
+import ImageCropIcon from '@atlaskit/icon-lab/core/image-crop';
 import CopyIcon from '@atlaskit/icon/core/copy';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import GrowDiagonalIcon from '@atlaskit/icon/core/grow-diagonal';
@@ -259,6 +260,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
     allowAltTextOnImages,
     allowMediaInline,
     allowMediaInlineImages,
+    allowImageEditing,
     allowImagePreview,
     isViewOnly,
     allowPixelResizing,
@@ -548,12 +550,33 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
           supportsViewMode: true
         });
       }
-      // Preview Support
-      if (allowImagePreview) {
+      // Image Editing Support
+      if (allowImageEditing && expValEquals('platform_editor_add_image_editing', 'isEnabled', true)) {
         var _mediaNode$attrs;
         const selectedMediaSingleNode = getSelectedMediaSingle(state);
         const mediaNode = selectedMediaSingleNode === null || selectedMediaSingleNode === void 0 ? void 0 : selectedMediaSingleNode.node.content.firstChild;
         if (!isVideo(mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$attrs = mediaNode.attrs) === null || _mediaNode$attrs === void 0 ? void 0 : _mediaNode$attrs.__fileMimeType)) {
+          toolbarButtons.push({
+            id: 'editor.media.edit',
+            testId: 'image-edit-toolbar-button',
+            type: 'button',
+            icon: ImageCropIcon,
+            title: intl.formatMessage(commonMessages.imageEdit),
+            onClick: () => {
+              // TODO: EDITOR-3716 - Implement image editing logic
+              // console.log('Image editing clicked');
+              return true;
+            },
+            supportsViewMode: false
+          });
+        }
+      }
+      // Preview Support
+      if (allowImagePreview) {
+        var _mediaNode$attrs2;
+        const selectedMediaSingleNode = getSelectedMediaSingle(state);
+        const mediaNode = selectedMediaSingleNode === null || selectedMediaSingleNode === void 0 ? void 0 : selectedMediaSingleNode.node.content.firstChild;
+        if (!isVideo(mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$attrs2 = mediaNode.attrs) === null || _mediaNode$attrs2 === void 0 ? void 0 : _mediaNode$attrs2.__fileMimeType)) {
           var _pluginInjectionApi$c4, _pluginInjectionApi$c5, _pluginInjectionApi$c6;
           toolbarButtons.push({
             id: 'editor.media.viewer',
@@ -636,10 +659,10 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
   } else {
     // Preview Support
     if (allowAdvancedToolBarOptions && allowImagePreview) {
-      var _mediaNode$attrs2;
+      var _mediaNode$attrs3;
       const selectedMediaSingleNode = getSelectedMediaSingle(state);
       const mediaNode = selectedMediaSingleNode === null || selectedMediaSingleNode === void 0 ? void 0 : selectedMediaSingleNode.node.content.firstChild;
-      if (!isVideo(mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$attrs2 = mediaNode.attrs) === null || _mediaNode$attrs2 === void 0 ? void 0 : _mediaNode$attrs2.__fileMimeType)) {
+      if (!isVideo(mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$attrs3 = mediaNode.attrs) === null || _mediaNode$attrs3 === void 0 ? void 0 : _mediaNode$attrs3.__fileMimeType)) {
         var _pluginInjectionApi$c7, _pluginInjectionApi$c8, _pluginInjectionApi$c9;
         toolbarButtons.push({
           id: 'editor.media.viewer',
@@ -686,6 +709,29 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
       updateToFullHeightSeparator(toolbarButtons);
       toolbarButtons.push(commentButton(intl, state, pluginInjectionApi, onCommentButtonMount));
     }
+    if (allowAdvancedToolBarOptions && allowImageEditing && expValEquals('platform_editor_add_image_editing', 'isEnabled', true)) {
+      var _mediaNode$attrs4;
+      const selectedMediaSingleNode = getSelectedMediaSingle(state);
+      const mediaNode = selectedMediaSingleNode === null || selectedMediaSingleNode === void 0 ? void 0 : selectedMediaSingleNode.node.content.firstChild;
+      if (!isVideo(mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$attrs4 = mediaNode.attrs) === null || _mediaNode$attrs4 === void 0 ? void 0 : _mediaNode$attrs4.__fileMimeType)) {
+        toolbarButtons.push({
+          id: 'editor.media.edit',
+          testId: 'image-edit-toolbar-button',
+          type: 'button',
+          icon: ImageCropIcon,
+          title: intl.formatMessage(commonMessages.imageEdit),
+          onClick: () => {
+            // TODO: EDITOR-3716 - Implement image editing logic
+            // console.log('Image editing clicked');
+            return true;
+          },
+          supportsViewMode: false
+        }, {
+          type: 'separator',
+          supportsViewMode: false
+        });
+      }
+    }
     return toolbarButtons;
   }
 };

package/dist/esm/mediaPlugin.js

@@ -322,9 +322,7 @@ export var mediaPlugin = function mediaPlugin(_ref3) {
       }));
     },
     secondaryToolbarComponent: function secondaryToolbarComponent(_ref11) {
-      var editorView = _ref11.editorView,
-        eventDispatcher = _ref11.eventDispatcher,
-        disabled = _ref11.disabled;
+      var disabled = _ref11.disabled;
       return /*#__PURE__*/React.createElement(ToolbarMedia, {
         isDisabled: disabled,
         isReducedSpacing: true,
@@ -332,8 +330,7 @@ export var mediaPlugin = function mediaPlugin(_ref3) {
       });
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref12) {
-        var formatMessage = _ref12.formatMessage;
+      quickInsert: function quickInsert() {
         return [];
       },
       floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
@@ -347,6 +344,7 @@ export var mediaPlugin = function mediaPlugin(_ref3) {
           allowLinking: options && options.allowLinking,
           allowAdvancedToolBarOptions: options && options.allowAdvancedToolBarOptions,
           allowAltTextOnImages: options && options.allowAltTextOnImages,
+          allowImageEditing: options && options.allowImageEditing,
           allowImagePreview: options && options.allowImagePreview,
           altTextValidator: options && options.altTextValidator,
           fullWidthEnabled: options && options.fullWidthEnabled,

package/dist/esm/nodeviews/mediaNodeView/index.js

@@ -18,9 +18,7 @@ import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-comm
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
-import { akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { getAttrsFromUrl } from '@atlaskit/media-client';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { updateCurrentMediaNodeAttrs } from '../../pm-plugins/commands/helpers';
 import { isMediaBlobUrlFromAttrs } from '../../pm-plugins/utils/media-common';
 // Ignored via go/ees005
@@ -71,22 +69,6 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
         }, true)(_this.view.state, _this.view.dispatch);
       }
     });
-    _defineProperty(_this, "getMaxCardDimensions", function (editorWidth) {
-      if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
-        var mediaSingleNodeParent = _this.getMediaSingleNode(_this.getPos);
-        if (mediaSingleNodeParent) {
-          var maxWidth = _this.getMaxWidthFromMediaSingleNode(mediaSingleNodeParent, editorWidth === null || editorWidth === void 0 ? void 0 : editorWidth.width);
-          return {
-            width: "".concat(maxWidth, "px"),
-            height: '100%'
-          };
-        }
-      }
-      return {
-        width: '100%',
-        height: '100%'
-      };
-    });
     _defineProperty(_this, "renderMediaNodeWithState", function (contextIdentifierProvider) {
       return function (_ref2) {
         var _this$reactComponentP;
@@ -110,15 +92,18 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
         }
         width = width || DEFAULT_IMAGE_WIDTH;
         height = height || DEFAULT_IMAGE_HEIGHT;
-        var pluginInjectionApi = _this.reactComponentProps.pluginInjectionApi;
 
         // mediaSingle defines the max dimensions, so we don't need to constrain twice.
-        var maxDimensions = _this.getMaxCardDimensions(editorWidth);
+        var maxDimensions = {
+          width: "100%",
+          height: "100%"
+        };
         var originalDimensions = {
           width: width,
           height: height
         };
         var isSelectedAndInteracted = _this.nodeInsideSelection() && interactionState !== 'hasNotHadInteraction';
+        var pluginInjectionApi = _this.reactComponentProps.pluginInjectionApi;
         return /*#__PURE__*/React.createElement(MediaNode, {
           api: pluginInjectionApi,
           view: _this.view,
@@ -149,44 +134,6 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
   }
   _inherits(MediaNodeView, _SelectionBasedNodeVi);
   return _createClass(MediaNodeView, [{
-    key: "getMediaSingleNode",
-    value: function getMediaSingleNode(getPos) {
-      var pos = getPos();
-      if (typeof pos !== 'number') {
-        return null;
-      }
-      var $pos = this.view.state.doc.resolve(pos);
-
-      // The parent of the media node should be mediaSingle
-      if ($pos.parent && $pos.parent.type.name === 'mediaSingle') {
-        return $pos.parent;
-      }
-      return null;
-    }
-  }, {
-    key: "getMaxWidthFromMediaSingleNode",
-    value: function getMaxWidthFromMediaSingleNode(mediaSingleNode, containerWidth) {
-      var _mediaSingleNode$attr = mediaSingleNode.attrs,
-        widthAttr = _mediaSingleNode$attr.width,
-        widthTypeAttr = _mediaSingleNode$attr.widthType,
-        layoutAttr = _mediaSingleNode$attr.layout;
-      if (widthAttr && widthTypeAttr === 'pixel') {
-        return widthAttr;
-      }
-      // on SSR mode, containerWidth from widthPluginState can be 0
-      if (!containerWidth) {
-        switch (layoutAttr) {
-          case 'full-width':
-            return akEditorFullWidthLayoutWidth;
-          case 'wide':
-            return akEditorCalculatedWideLayoutWidth;
-          default:
-            return akEditorDefaultLayoutWidth;
-        }
-      }
-      return containerWidth;
-    }
-  }, {
     key: "createDomRef",
     value: function createDomRef() {
       var domRef = document.createElement('div');

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

@@ -13,6 +13,7 @@ import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-che
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { contains, findParentNodeOfType, hasParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
+import ImageCropIcon from '@atlaskit/icon-lab/core/image-crop';
 import CopyIcon from '@atlaskit/icon/core/copy';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import GrowDiagonalIcon from '@atlaskit/icon/core/grow-diagonal';
@@ -262,6 +263,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     allowAltTextOnImages = options.allowAltTextOnImages,
     allowMediaInline = options.allowMediaInline,
     allowMediaInlineImages = options.allowMediaInlineImages,
+    allowImageEditing = options.allowImageEditing,
     allowImagePreview = options.allowImagePreview,
     isViewOnly = options.isViewOnly,
     allowPixelResizing = options.allowPixelResizing,
@@ -541,12 +543,33 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           supportsViewMode: true
         });
       }
-      // Preview Support
-      if (allowImagePreview) {
+      // Image Editing Support
+      if (allowImageEditing && expValEquals('platform_editor_add_image_editing', 'isEnabled', true)) {
         var _mediaNode$attrs;
         var _selectedMediaSingleNode = getSelectedMediaSingle(state);
         var mediaNode = _selectedMediaSingleNode === null || _selectedMediaSingleNode === void 0 ? void 0 : _selectedMediaSingleNode.node.content.firstChild;
         if (!isVideo(mediaNode === null || mediaNode === void 0 || (_mediaNode$attrs = mediaNode.attrs) === null || _mediaNode$attrs === void 0 ? void 0 : _mediaNode$attrs.__fileMimeType)) {
+          toolbarButtons.push({
+            id: 'editor.media.edit',
+            testId: 'image-edit-toolbar-button',
+            type: 'button',
+            icon: ImageCropIcon,
+            title: intl.formatMessage(commonMessages.imageEdit),
+            onClick: function onClick() {
+              // TODO: EDITOR-3716 - Implement image editing logic
+              // console.log('Image editing clicked');
+              return true;
+            },
+            supportsViewMode: false
+          });
+        }
+      }
+      // Preview Support
+      if (allowImagePreview) {
+        var _mediaNode$attrs2;
+        var _selectedMediaSingleNode2 = getSelectedMediaSingle(state);
+        var _mediaNode = _selectedMediaSingleNode2 === null || _selectedMediaSingleNode2 === void 0 ? void 0 : _selectedMediaSingleNode2.node.content.firstChild;
+        if (!isVideo(_mediaNode === null || _mediaNode === void 0 || (_mediaNode$attrs2 = _mediaNode.attrs) === null || _mediaNode$attrs2 === void 0 ? void 0 : _mediaNode$attrs2.__fileMimeType)) {
           var _pluginInjectionApi$c2;
           toolbarButtons.push({
             id: 'editor.media.viewer',
@@ -629,10 +652,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
   } else {
     // Preview Support
     if (allowAdvancedToolBarOptions && allowImagePreview) {
-      var _mediaNode$attrs2;
-      var _selectedMediaSingleNode2 = getSelectedMediaSingle(state);
-      var _mediaNode = _selectedMediaSingleNode2 === null || _selectedMediaSingleNode2 === void 0 ? void 0 : _selectedMediaSingleNode2.node.content.firstChild;
-      if (!isVideo(_mediaNode === null || _mediaNode === void 0 || (_mediaNode$attrs2 = _mediaNode.attrs) === null || _mediaNode$attrs2 === void 0 ? void 0 : _mediaNode$attrs2.__fileMimeType)) {
+      var _mediaNode2$attrs;
+      var _selectedMediaSingleNode3 = getSelectedMediaSingle(state);
+      var _mediaNode2 = _selectedMediaSingleNode3 === null || _selectedMediaSingleNode3 === void 0 ? void 0 : _selectedMediaSingleNode3.node.content.firstChild;
+      if (!isVideo(_mediaNode2 === null || _mediaNode2 === void 0 || (_mediaNode2$attrs = _mediaNode2.attrs) === null || _mediaNode2$attrs === void 0 ? void 0 : _mediaNode2$attrs.__fileMimeType)) {
         var _pluginInjectionApi$c3;
         toolbarButtons.push({
           id: 'editor.media.viewer',
@@ -679,6 +702,29 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       updateToFullHeightSeparator(toolbarButtons);
       toolbarButtons.push(commentButton(intl, state, pluginInjectionApi, onCommentButtonMount));
     }
+    if (allowAdvancedToolBarOptions && allowImageEditing && expValEquals('platform_editor_add_image_editing', 'isEnabled', true)) {
+      var _mediaNode3$attrs;
+      var _selectedMediaSingleNode4 = getSelectedMediaSingle(state);
+      var _mediaNode3 = _selectedMediaSingleNode4 === null || _selectedMediaSingleNode4 === void 0 ? void 0 : _selectedMediaSingleNode4.node.content.firstChild;
+      if (!isVideo(_mediaNode3 === null || _mediaNode3 === void 0 || (_mediaNode3$attrs = _mediaNode3.attrs) === null || _mediaNode3$attrs === void 0 ? void 0 : _mediaNode3$attrs.__fileMimeType)) {
+        toolbarButtons.push({
+          id: 'editor.media.edit',
+          testId: 'image-edit-toolbar-button',
+          type: 'button',
+          icon: ImageCropIcon,
+          title: intl.formatMessage(commonMessages.imageEdit),
+          onClick: function onClick() {
+            // TODO: EDITOR-3716 - Implement image editing logic
+            // console.log('Image editing clicked');
+            return true;
+          },
+          supportsViewMode: false
+        }, {
+          type: 'separator',
+          supportsViewMode: false
+        });
+      }
+    }
     return toolbarButtons;
   }
 };

package/dist/types/nodeviews/mediaNodeView/index.d.ts

@@ -9,7 +9,7 @@ import type { SharedInteractionState } from '@atlaskit/editor-plugin-interaction
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Decoration, EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { MediaNextEditorPluginType } from '../../mediaPluginType';
-import type { getPosHandler, getPosHandlerNode, MediaOptions } from '../../types';
+import type { getPosHandler, MediaOptions } from '../../types';
 import type { MediaNodeViewProps } from '../types';
 interface MediaNodeWithPluginStateComponentProps {
     interactionState?: SharedInteractionState['interactionState'];
@@ -18,8 +18,6 @@ interface MediaNodeWithPluginStateComponentProps {
 }
 declare class MediaNodeView extends SelectionBasedNodeView<MediaNodeViewProps> {
     private isSelected;
-    getMediaSingleNode(getPos: getPosHandlerNode): PMNode | null;
-    getMaxWidthFromMediaSingleNode(mediaSingleNode: PMNode, containerWidth?: number): number;
     createDomRef(): HTMLElement;
     viewShouldUpdate(nextNode: PMNode, decorations: Decoration[]): boolean;
     stopEvent(event: Event): boolean;
@@ -29,10 +27,6 @@ declare class MediaNodeView extends SelectionBasedNodeView<MediaNodeViewProps> {
         height: number;
         width: number;
     }) => void;
-    getMaxCardDimensions: (editorWidth?: WidthPluginState) => {
-        width: string;
-        height: string;
-    };
     renderMediaNodeWithState: (contextIdentifierProvider?: Promise<ContextIdentifierProvider>) => ({ width: editorWidth, mediaProvider, interactionState, }: MediaNodeWithPluginStateComponentProps) => React.JSX.Element;
     renderMediaNodeWithProviders: ({ contextIdentifierProvider }: Providers) => React.JSX.Element;
     render(): React.JSX.Element;

package/dist/types/types/index.d.ts

@@ -23,6 +23,7 @@ export interface MediaPluginOptions {
     allowCaptions?: boolean;
     allowCommentsOnMedia?: boolean;
     allowDropzoneDropLine?: boolean;
+    allowImageEditing?: boolean;
     allowImagePreview?: boolean;
     allowLazyLoading?: boolean;
     allowLinking?: boolean;
@@ -148,6 +149,7 @@ export type MediaFloatingToolbarOptions = {
     allowAdvancedToolBarOptions?: boolean;
     allowAltTextOnImages?: boolean;
     allowCommentsOnMedia?: boolean;
+    allowImageEditing?: boolean;
     allowImagePreview?: boolean;
     allowLinking?: boolean;
     allowMediaInline?: boolean;

package/dist/types/ui/MediaPicker/BrowserWrapper.d.ts

@@ -8,5 +8,5 @@ type Props = {
     isOpen?: boolean;
     onBrowseFn: (browse: () => void) => void;
 };
-export declare const BrowserWrapper: ({ api, isOpen, onBrowseFn, featureFlags }: Props) => React.JSX.Element;
+export declare const BrowserWrapper: ({ api, isOpen, onBrowseFn, featureFlags, }: Props) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/nodeviews/mediaNodeView/index.d.ts

@@ -9,7 +9,7 @@ import type { SharedInteractionState } from '@atlaskit/editor-plugin-interaction
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Decoration, EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { MediaNextEditorPluginType } from '../../mediaPluginType';
-import type { getPosHandler, getPosHandlerNode, MediaOptions } from '../../types';
+import type { getPosHandler, MediaOptions } from '../../types';
 import type { MediaNodeViewProps } from '../types';
 interface MediaNodeWithPluginStateComponentProps {
     interactionState?: SharedInteractionState['interactionState'];
@@ -18,8 +18,6 @@ interface MediaNodeWithPluginStateComponentProps {
 }
 declare class MediaNodeView extends SelectionBasedNodeView<MediaNodeViewProps> {
     private isSelected;
-    getMediaSingleNode(getPos: getPosHandlerNode): PMNode | null;
-    getMaxWidthFromMediaSingleNode(mediaSingleNode: PMNode, containerWidth?: number): number;
     createDomRef(): HTMLElement;
     viewShouldUpdate(nextNode: PMNode, decorations: Decoration[]): boolean;
     stopEvent(event: Event): boolean;
@@ -29,10 +27,6 @@ declare class MediaNodeView extends SelectionBasedNodeView<MediaNodeViewProps> {
         height: number;
         width: number;
     }) => void;
-    getMaxCardDimensions: (editorWidth?: WidthPluginState) => {
-        width: string;
-        height: string;
-    };
     renderMediaNodeWithState: (contextIdentifierProvider?: Promise<ContextIdentifierProvider>) => ({ width: editorWidth, mediaProvider, interactionState, }: MediaNodeWithPluginStateComponentProps) => React.JSX.Element;
     renderMediaNodeWithProviders: ({ contextIdentifierProvider }: Providers) => React.JSX.Element;
     render(): React.JSX.Element;

package/dist/types-ts4.5/types/index.d.ts

@@ -23,6 +23,7 @@ export interface MediaPluginOptions {
     allowCaptions?: boolean;
     allowCommentsOnMedia?: boolean;
     allowDropzoneDropLine?: boolean;
+    allowImageEditing?: boolean;
     allowImagePreview?: boolean;
     allowLazyLoading?: boolean;
     allowLinking?: boolean;
@@ -148,6 +149,7 @@ export type MediaFloatingToolbarOptions = {
     allowAdvancedToolBarOptions?: boolean;
     allowAltTextOnImages?: boolean;
     allowCommentsOnMedia?: boolean;
+    allowImageEditing?: boolean;
     allowImagePreview?: boolean;
     allowLinking?: boolean;
     allowMediaInline?: boolean;

package/dist/types-ts4.5/ui/MediaPicker/BrowserWrapper.d.ts

@@ -8,5 +8,5 @@ type Props = {
     isOpen?: boolean;
     onBrowseFn: (browse: () => void) => void;
 };
-export declare const BrowserWrapper: ({ api, isOpen, onBrowseFn, featureFlags }: Props) => React.JSX.Element;
+export declare const BrowserWrapper: ({ api, isOpen, onBrowseFn, featureFlags, }: Props) => React.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "8.4.19",
+	"version": "8.5.1",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,7 +32,7 @@
 		"@atlaskit/adf-schema": "^51.5.1",
 		"@atlaskit/analytics-namespaced-context": "^7.2.0",
 		"@atlaskit/analytics-next": "^11.1.0",
-		"@atlaskit/button": "^23.6.0",
+		"@atlaskit/button": "^23.7.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-plugin-analytics": "^6.2.0",
 		"@atlaskit/editor-plugin-annotation": "^6.3.0",
@@ -51,11 +51,11 @@
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.10.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/form": "^14.3.0",
+		"@atlaskit/form": "^15.0.0",
 		"@atlaskit/icon": "^29.0.0",
 		"@atlaskit/icon-lab": "^5.12.0",
-		"@atlaskit/media-card": "^79.9.0",
-		"@atlaskit/media-client": "^35.6.0",
+		"@atlaskit/media-card": "^79.10.0",
+		"@atlaskit/media-client": "^35.7.0",
 		"@atlaskit/media-client-react": "^4.1.0",
 		"@atlaskit/media-common": "^12.3.0",
 		"@atlaskit/media-filmstrip": "^51.1.0",
@@ -64,9 +64,9 @@
 		"@atlaskit/media-viewer": "^52.5.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^16.4.0",
-		"@atlaskit/textfield": "^8.1.0",
+		"@atlaskit/textfield": "^8.2.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^15.0.0",
+		"@atlaskit/tmp-editor-statsig": "^15.9.0",
 		"@atlaskit/tokens": "^8.4.0",
 		"@atlaskit/tooltip": "^20.11.0",
 		"@babel/runtime": "^7.0.0",
@@ -78,7 +78,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.40.0",
+		"@atlaskit/editor-common": "^110.41.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",