@atlaskit/editor-plugin-media 8.6.0 → 8.7.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-plugin-media
 
+## 8.7.0
+
+### Minor Changes
+
+- [`79b6f0fef0ecb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/79b6f0fef0ecb) -
+  Added a modal upon clicking the image editing button
+
+### Patch Changes
+
+- [`53aef9589ca55`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/53aef9589ca55) -
+  [EDITOR-3786] Make sure that for any check of `cc_editor_ai_content_mode` &&
+  `platform_editor_content_mode_button_mvp` in the code we are also checking
+  `confluence_compact_text_format`
+- Updated dependencies
+
+## 8.6.1
+
+### Patch Changes
+
+- [`b6a737b41d065`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b6a737b41d065) -
+  Clean up experiment platform_editor_fix_clone_nesting_exp
+- Updated dependencies
+
 ## 8.6.0
 
 ### Minor Changes

package/dist/cjs/mediaPlugin.js

@@ -14,6 +14,7 @@ var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _mediaCommon = require("@atlaskit/media-common");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _lazyMedia = require("./nodeviews/lazy-media");
 var _lazyMediaGroup = require("./nodeviews/lazy-media-group");
 var _lazyMediaInline = require("./nodeviews/lazy-media-inline");
@@ -34,6 +35,7 @@ var _pixelResizing = require("./pm-plugins/pixel-resizing");
 var _pluginKey = require("./pm-plugins/plugin-key");
 var _mediaCommon2 = require("./pm-plugins/utils/media-common");
 var _mediaSingle2 = require("./pm-plugins/utils/media-single");
+var _ModalWrapper = require("./ui/ImageEditor/ModalWrapper");
 var _MediaPicker = require("./ui/MediaPicker");
 var _PortalWrapper = require("./ui/MediaViewer/PortalWrapper");
 var _toolbar = require("./ui/toolbar");
@@ -104,10 +106,36 @@ var MediaViewerFunctionalComponent = function MediaViewerFunctionalComponent(_re
     items: mediaItems
   });
 };
-var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
-  var _ref3$config = _ref3.config,
-    options = _ref3$config === void 0 ? {} : _ref3$config,
-    api = _ref3.api;
+var imageEditorStateSelector = function imageEditorStateSelector(states) {
+  var _states$mediaState6, _states$mediaState7, _states$mediaState8;
+  return {
+    isImageEditorVisible: (_states$mediaState6 = states.mediaState) === null || _states$mediaState6 === void 0 ? void 0 : _states$mediaState6.isImageEditorVisible,
+    imageEditorSelectedMedia: (_states$mediaState7 = states.mediaState) === null || _states$mediaState7 === void 0 ? void 0 : _states$mediaState7.imageEditorSelectedMedia,
+    mediaClientConfig: (_states$mediaState8 = states.mediaState) === null || _states$mediaState8 === void 0 ? void 0 : _states$mediaState8.mediaClientConfig
+  };
+};
+var ImageEditorFunctionalComponent = function ImageEditorFunctionalComponent(_ref3) {
+  var api = _ref3.api;
+  var _useSharedPluginState3 = (0, _hooks.useSharedPluginStateWithSelector)(api, ['media'], imageEditorStateSelector),
+    isImageEditorVisible = _useSharedPluginState3.isImageEditorVisible,
+    imageEditorSelectedMedia = _useSharedPluginState3.imageEditorSelectedMedia,
+    mediaClientConfig = _useSharedPluginState3.mediaClientConfig;
+  if (!isImageEditorVisible || !imageEditorSelectedMedia || !mediaClientConfig) {
+    return null;
+  }
+  var handleOnClose = function handleOnClose() {
+    api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.media.commands.hideImageEditor);
+  };
+  return /*#__PURE__*/_react.default.createElement(_ModalWrapper.RenderImageEditor, {
+    mediaClientConfig: mediaClientConfig,
+    onClose: handleOnClose,
+    selectedNodeAttrs: imageEditorSelectedMedia
+  });
+};
+var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref4) {
+  var _ref4$config = _ref4.config,
+    options = _ref4$config === void 0 ? {} : _ref4$config,
+    api = _ref4.api;
   var previousMediaProvider;
   var mediaErrorLocalIds = new Set();
   return {
@@ -148,8 +176,8 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
           return false;
         }
         previousMediaProvider = provider;
-        return (_api$core$actions$exe = api === null || api === void 0 ? void 0 : api.core.actions.execute(function (_ref4) {
-          var tr = _ref4.tr;
+        return (_api$core$actions$exe = api === null || api === void 0 ? void 0 : api.core.actions.execute(function (_ref5) {
+          var tr = _ref5.tr;
           return tr.setMeta(_pluginKey.stateKey, {
             mediaProvider: provider
           });
@@ -159,19 +187,21 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
     commands: {
       showMediaViewer: _commands.showMediaViewer,
       hideMediaViewer: _commands.hideMediaViewer,
-      trackMediaPaste: _commands.trackMediaPaste
+      trackMediaPaste: _commands.trackMediaPaste,
+      showImageEditor: _commands.showImageEditor,
+      hideImageEditor: _commands.hideImageEditor
     },
     nodes: function nodes() {
-      var _ref5 = options || {},
-        _ref5$allowMediaGroup = _ref5.allowMediaGroup,
-        allowMediaGroup = _ref5$allowMediaGroup === void 0 ? true : _ref5$allowMediaGroup,
-        _ref5$allowMediaSingl = _ref5.allowMediaSingle,
-        allowMediaSingle = _ref5$allowMediaSingl === void 0 ? false : _ref5$allowMediaSingl,
-        _ref5$allowPixelResiz = _ref5.allowPixelResizing,
-        allowPixelResizing = _ref5$allowPixelResiz === void 0 ? false : _ref5$allowPixelResiz,
-        allowCaptions = _ref5.allowCaptions,
-        allowMediaInlineImages = _ref5.allowMediaInlineImages,
-        mediaFeatureFlags = _ref5.featureFlags;
+      var _ref6 = options || {},
+        _ref6$allowMediaGroup = _ref6.allowMediaGroup,
+        allowMediaGroup = _ref6$allowMediaGroup === void 0 ? true : _ref6$allowMediaGroup,
+        _ref6$allowMediaSingl = _ref6.allowMediaSingle,
+        allowMediaSingle = _ref6$allowMediaSingl === void 0 ? false : _ref6$allowMediaSingl,
+        _ref6$allowPixelResiz = _ref6.allowPixelResizing,
+        allowPixelResizing = _ref6$allowPixelResiz === void 0 ? false : _ref6$allowPixelResiz,
+        allowCaptions = _ref6.allowCaptions,
+        allowMediaInlineImages = _ref6.allowMediaInlineImages,
+        mediaFeatureFlags = _ref6.featureFlags;
       var allowMediaInline = (0, _platformFeatureFlags.fg)('platform_editor_remove_media_inline_feature_flag') ? allowMediaInlineImages : (0, _mediaCommon.getMediaFeatureFlag)('mediaInline', mediaFeatureFlags);
       var mediaSingleOption = {
         withCaption: allowCaptions,
@@ -205,16 +235,16 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
     pmPlugins: function pmPlugins() {
       var pmPlugins = [{
         name: 'media',
-        plugin: function plugin(_ref6) {
-          var schema = _ref6.schema,
-            dispatch = _ref6.dispatch,
-            getIntl = _ref6.getIntl,
-            eventDispatcher = _ref6.eventDispatcher,
-            providerFactory = _ref6.providerFactory,
-            errorReporter = _ref6.errorReporter,
-            portalProviderAPI = _ref6.portalProviderAPI,
-            dispatchAnalyticsEvent = _ref6.dispatchAnalyticsEvent,
-            nodeViewPortalProviderAPI = _ref6.nodeViewPortalProviderAPI;
+        plugin: function plugin(_ref7) {
+          var schema = _ref7.schema,
+            dispatch = _ref7.dispatch,
+            getIntl = _ref7.getIntl,
+            eventDispatcher = _ref7.eventDispatcher,
+            providerFactory = _ref7.providerFactory,
+            errorReporter = _ref7.errorReporter,
+            portalProviderAPI = _ref7.portalProviderAPI,
+            dispatchAnalyticsEvent = _ref7.dispatchAnalyticsEvent,
+            nodeViewPortalProviderAPI = _ref7.nodeViewPortalProviderAPI;
           return (0, _main.createPlugin)(schema, {
             providerFactory: providerFactory,
             nodeViews: {
@@ -233,17 +263,17 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
         }
       }, {
         name: 'mediaKeymap',
-        plugin: function plugin(_ref7) {
+        plugin: function plugin(_ref8) {
           var _api$analytics3, _api$selection;
-          var getIntl = _ref7.getIntl;
+          var getIntl = _ref8.getIntl;
           return (0, _keymap2.default)(options, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : _api$selection.actions, api === null || api === void 0 ? void 0 : api.width, getIntl);
         }
       }];
       if (options && options.allowMediaSingle) {
         pmPlugins.push({
           name: 'mediaSingleKeymap',
-          plugin: function plugin(_ref8) {
-            var schema = _ref8.schema;
+          plugin: function plugin(_ref9) {
+            var schema = _ref9.schema;
             return (0, _keymapMedia.default)(schema);
           }
         });
@@ -255,9 +285,9 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
         });
         pmPlugins.push({
           name: 'mediaAltTextKeymap',
-          plugin: function plugin(_ref9) {
+          plugin: function plugin(_ref0) {
             var _api$analytics4;
-            var schema = _ref9.schema;
+            var schema = _ref0.schema;
             return (0, _keymap.default)(schema, api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions);
           }
         });
@@ -265,15 +295,15 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
       if (options && options.allowLinking) {
         pmPlugins.push({
           name: 'mediaLinking',
-          plugin: function plugin(_ref0) {
-            var dispatch = _ref0.dispatch;
+          plugin: function plugin(_ref1) {
+            var dispatch = _ref1.dispatch;
             return (0, _linking.default)(dispatch);
           }
         });
         pmPlugins.push({
           name: 'mediaLinkingKeymap',
-          plugin: function plugin(_ref1) {
-            var schema = _ref1.schema;
+          plugin: function plugin(_ref10) {
+            var schema = _ref10.schema;
             return (0, _keymap3.default)(schema);
           }
         });
@@ -315,13 +345,16 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
       });
       return pmPlugins;
     },
-    contentComponent: function contentComponent(_ref10) {
-      var editorView = _ref10.editorView,
-        appearance = _ref10.appearance;
+    contentComponent: function contentComponent(_ref11) {
+      var editorView = _ref11.editorView,
+        appearance = _ref11.appearance;
       if (!editorView) {
         return null;
       }
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(MediaViewerFunctionalComponent, {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (options === null || options === void 0 ? void 0 : options.allowImageEditing) && (0, _expValEquals.expValEquals)('platform_editor_add_image_editing', 'isEnabled', true) && /*#__PURE__*/_react.default.createElement(ImageEditorFunctionalComponent, {
+        api: api,
+        editorView: editorView
+      }), /*#__PURE__*/_react.default.createElement(MediaViewerFunctionalComponent, {
         api: api,
         editorView: editorView
       }), /*#__PURE__*/_react.default.createElement(MediaPickerFunctionalComponent, {
@@ -330,8 +363,8 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
         api: api
       }));
     },
-    secondaryToolbarComponent: function secondaryToolbarComponent(_ref11) {
-      var disabled = _ref11.disabled;
+    secondaryToolbarComponent: function secondaryToolbarComponent(_ref12) {
+      var disabled = _ref12.disabled;
       return /*#__PURE__*/_react.default.createElement(_ToolbarMedia.default, {
         isDisabled: disabled,
         isReducedSpacing: true,

package/dist/cjs/pm-plugins/actions.js

@@ -7,5 +7,7 @@ exports.ACTIONS = void 0;
 var ACTIONS = exports.ACTIONS = {
   SHOW_MEDIA_VIEWER: 'SHOW_MEDIA_VIEWER',
   HIDE_MEDIA_VIEWER: 'HIDE_MEDIA_VIEWER',
-  TRACK_MEDIA_PASTE: 'TRACK_MEDIA_PASTE'
+  TRACK_MEDIA_PASTE: 'TRACK_MEDIA_PASTE',
+  SHOW_IMAGE_EDITOR: 'SHOW_IMAGE_EDITOR',
+  HIDE_IMAGE_EDITOR: 'HIDE_IMAGE_EDITOR'
 };

package/dist/cjs/pm-plugins/commands.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.trackMediaPaste = exports.showMediaViewer = exports.hideMediaViewer = void 0;
+exports.trackMediaPaste = exports.showMediaViewer = exports.showImageEditor = exports.hideMediaViewer = exports.hideImageEditor = void 0;
 var _actions = require("../pm-plugins/actions");
 var _pluginKey = require("../pm-plugins/plugin-key");
 var _mediaCommon = require("../pm-plugins/utils/media-common");
@@ -37,4 +37,26 @@ var trackMediaPaste = exports.trackMediaPaste = function trackMediaPaste(attrs)
     });
     return tr;
   };
+};
+var showImageEditor = exports.showImageEditor = function showImageEditor(media) {
+  return function (_ref4) {
+    var tr = _ref4.tr;
+    tr.setMeta(_pluginKey.stateKey, {
+      type: _actions.ACTIONS.SHOW_IMAGE_EDITOR,
+      imageEditorSelectedMedia: media,
+      isImageEditorVisible: true
+    });
+    tr.setMeta('addToHistory', false);
+    return tr;
+  };
+};
+var hideImageEditor = exports.hideImageEditor = function hideImageEditor(_ref5) {
+  var tr = _ref5.tr;
+  tr.setMeta(_pluginKey.stateKey, {
+    type: _actions.ACTIONS.HIDE_IMAGE_EDITOR,
+    imageEditorSelectedMedia: null,
+    isImageEditorVisible: false
+  });
+  tr.setMeta('addToHistory', false);
+  return tr;
 };

package/dist/cjs/pm-plugins/main.js

@@ -90,6 +90,7 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
     (0, _defineProperty2.default)(this, "allowInlineImages", false);
     (0, _defineProperty2.default)(this, "uploadInProgressSubscriptions", []);
     (0, _defineProperty2.default)(this, "uploadInProgressSubscriptionsNotified", false);
+    (0, _defineProperty2.default)(this, "isImageEditorVisible", false);
     // this is only a temporary variable, which gets cleared after the last inserted node has been selected
     (0, _defineProperty2.default)(this, "lastAddedMediaSingleFileIds", []);
     (0, _defineProperty2.default)(this, "destroyed", false);
@@ -485,19 +486,14 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
   return (0, _createClass2.default)(MediaPluginStateImplementation, [{
     key: "clone",
     value: function clone() {
+      var _originalTarget;
       var clonedAt = (performance || Date).now();
 
       // Prevent double wrapping
       // If clone is repeatedly called, we want to proxy the underlying MediaPluginStateImplementation target, rather than the proxy itself
       // If we proxy the proxy, then calling get in future will need to recursively unwrap proxies to find the original target, which causes performance issues
       // Instead, we check if there is an original target stored on "this", and if so, we use that as the proxy target instead
-      // eslint-disable-next-line @typescript-eslint/no-this-alias -- This is required while this is behind a feature-gate. Once the feature-gate is removed, we can inline proxyTarget as "(this as unknown as { originalTarget?: typeof proxyTarget }).originalTarget ?? this"
-      var proxyTarget = this;
-      var originalTarget = this.originalTarget;
-      if (originalTarget !== undefined && (0, _expValEquals.expValEquals)('platform_editor_fix_clone_nesting_exp', 'isEnabled', true)) {
-        proxyTarget = originalTarget;
-      }
-      return new Proxy(proxyTarget, {
+      return new Proxy((_originalTarget = this.originalTarget) !== null && _originalTarget !== void 0 ? _originalTarget : this, {
         get: function get(target, prop, receiver) {
           if (prop === 'singletonCreatedAt') {
             return clonedAt;
@@ -642,6 +638,11 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
     value: function setResizingWidth(width) {
       this.resizingWidth = width;
     }
+  }, {
+    key: "setImageEditorVisibility",
+    value: function setImageEditorVisibility(isVisible) {
+      this.isImageEditorVisible = isVisible;
+    }
   }, {
     key: "updateElement",
     value: function updateElement() {
@@ -883,6 +884,16 @@ var createPlugin = exports.createPlugin = function createPlugin(_schema, options
               nextPluginState = pluginState.clone();
             }
             break;
+          case _actions.ACTIONS.SHOW_IMAGE_EDITOR:
+            pluginState.imageEditorSelectedMedia = meta.imageEditorSelectedMedia;
+            pluginState.isImageEditorVisible = meta.isImageEditorVisible;
+            nextPluginState = nextPluginState.clone();
+            break;
+          case _actions.ACTIONS.HIDE_IMAGE_EDITOR:
+            pluginState.imageEditorSelectedMedia = undefined;
+            pluginState.isImageEditorVisible = meta.isImageEditorVisible;
+            nextPluginState = nextPluginState.clone();
+            break;
         }
 
         // NOTE: We're not calling passing new state to the Editor, because we depend on the view.state reference

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

@@ -55,7 +55,7 @@ var CaptionPlaceholder = exports.CaptionPlaceholder = /*#__PURE__*/_react.defaul
       // This id is just used for setting styles at the moment, if it's needed for anything more specific
       // It may need to be generated to avoid overlap
       ,
-      id: (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') ? _mediaSingle.CAPTION_PLACEHOLDER_ID : undefined,
+      id: (0, _expValEquals.expValEquals)('confluence_compact_text_format', 'isEnabled', true) || (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') ? _mediaSingle.CAPTION_PLACEHOLDER_ID : undefined,
       "data-id": _mediaSingle.CAPTION_PLACEHOLDER_ID,
       "data-testid": "caption-placeholder"
     }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage
@@ -83,7 +83,7 @@ var CaptionPlaceholderButton = exports.CaptionPlaceholderButton = /*#__PURE__*/_
     testId: "caption-placeholder",
     padding: "space.0",
     xcss: placeholderButton
-  }, (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') ?
+  }, (0, _expValEquals.expValEquals)('confluence_compact_text_format', 'isEnabled', true) || (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') ?
   // This id is just used for setting styles at the moment, if it's needed for anything more specific
   // It may need to be generated to avoid overlap
   // eslint-disable-next-line @atlaskit/design-system/use-primitives-text

package/dist/cjs/ui/ImageEditor/ModalWrapper.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RenderImageEditor = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _mediaClient = require("@atlaskit/media-client");
+var _utils = require("../toolbar/utils");
+var _index = require("./index");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var RenderImageEditor = exports.RenderImageEditor = function RenderImageEditor(_ref) {
+  var mediaClientConfig = _ref.mediaClientConfig,
+    onClose = _ref.onClose,
+    selectedNodeAttrs = _ref.selectedNodeAttrs,
+    errorReporter = _ref.errorReporter,
+    onSave = _ref.onSave;
+  var _useState = (0, _react.useState)(''),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    imageUrl = _useState2[0],
+    setImageUrl = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var getImageUrl = function getImageUrl() {
+      if ((0, _utils.isExternalMedia)(selectedNodeAttrs)) {
+        // External image - use the URL directly
+        setImageUrl(selectedNodeAttrs.url || '');
+      } else {
+        // File media - use MediaClient to get the image URL
+        var id = selectedNodeAttrs.id,
+          _selectedNodeAttrs$co = selectedNodeAttrs.collection,
+          collection = _selectedNodeAttrs$co === void 0 ? '' : _selectedNodeAttrs$co;
+        try {
+          var mediaClient = new _mediaClient.MediaClient(mediaClientConfig);
+
+          // Subscribe to file state to get file information
+          var subscription = mediaClient.file.getFileState(id, {
+            collectionName: collection
+          }).subscribe(function (fileState) {
+            if (fileState.status === 'processed' || fileState.status === 'processing') {
+              // Get the image URL from the processed file
+              mediaClient.file.getFileBinaryURL(id, collection).then(function (url) {
+                setImageUrl(url);
+              });
+            }
+          });
+
+          // Cleanup subscription on unmount
+          return function () {
+            return subscription.unsubscribe();
+          };
+        } catch (error) {
+          if (errorReporter) {
+            errorReporter.captureException(error instanceof Error ? error : new Error(String(error)));
+          }
+          setImageUrl('');
+        }
+      }
+    };
+    getImageUrl();
+  }, [selectedNodeAttrs, mediaClientConfig, errorReporter]);
+  return /*#__PURE__*/_react.default.createElement(_index.ImageEditor, {
+    isOpen: true,
+    onClose: onClose,
+    imageUrl: imageUrl
+  });
+};

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

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageEditor = void 0;
+var _react = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var imageWrapper = (0, _react.css)({
+  maxHeight: 'calc(100vh - 250px)',
+  width: '100%',
+  overflow: 'hidden',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+var imageStyle = (0, _react.css)({
+  maxWidth: '100%',
+  maxHeight: 'calc(100vh - 250px)',
+  width: 'auto',
+  height: 'auto',
+  objectFit: 'contain'
+});
+var ImageEditor = exports.ImageEditor = function ImageEditor(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    imageUrl = _ref.imageUrl;
+  return (0, _react.jsx)(_modalDialog.ModalTransition, null, isOpen && (0, _react.jsx)(_modalDialog.default, {
+    onClose: onClose,
+    width: 1800
+  }, (0, _react.jsx)("br", null), (0, _react.jsx)(_modalDialog.ModalBody, null, (0, _react.jsx)("div", {
+    css: imageWrapper
+  }, imageUrl && (0, _react.jsx)("img", {
+    src: imageUrl,
+    alt: "Edit preview",
+    css: imageStyle
+  }))), (0, _react.jsx)(_modalDialog.ModalFooter, null, (0, _react.jsx)(_new.default, {
+    appearance: "subtle",
+    onClick: onClose
+  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, {
+    id: "editor.imageEditor.cancel",
+    defaultMessage: "Cancel"
+  })), (0, _react.jsx)(_new.default, {
+    appearance: "primary",
+    onClick: onClose
+  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, {
+    id: "editor.imageEditor.done",
+    defaultMessage: "Done"
+  })))));
+};

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

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.overflowDropdwonBtnTriggerTestId = exports.handleShowMediaViewer = exports.floatingToolbar = void 0;
+exports.overflowDropdwonBtnTriggerTestId = exports.handleShowMediaViewer = exports.handleShowImageEditor = exports.floatingToolbar = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -121,6 +121,15 @@ var handleShowMediaViewer = exports.handleShowMediaViewer = function handleShowM
   }
   api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.media.commands.showMediaViewer(selectedNodeAttrs));
 };
+var handleShowImageEditor = exports.handleShowImageEditor = function handleShowImageEditor(_ref2) {
+  var api = _ref2.api,
+    mediaPluginState = _ref2.mediaPluginState;
+  var selectedNodeAttrs = (0, _utils2.getSelectedNearestMediaContainerNodeAttrs)(mediaPluginState);
+  if (!selectedNodeAttrs) {
+    return false;
+  }
+  api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.media.commands.showImageEditor(selectedNodeAttrs));
+};
 var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, editorAnalyticsAPI, forceFocusSelector, isViewOnly) {
   var _pluginInjectionApi$c;
   var disableDownloadButton = (0, _utils2.getIsDownloadDisabledByDataSecurityPolicy)(mediaPluginState);
@@ -278,8 +287,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     allowPixelResizing = options.allowPixelResizing,
     onCommentButtonMount = options.onCommentButtonMount;
   var toolbarButtons = [];
-  var _ref2 = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d2 = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {},
-    hoverDecoration = _ref2.hoverDecoration;
+  var _ref3 = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d2 = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {},
+    hoverDecoration = _ref3.hoverDecoration;
   var areAnyNewToolbarFlagsEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar));
   var disableDownloadButton = (0, _utils2.getIsDownloadDisabledByDataSecurityPolicy)(pluginState);
   if ((0, _imageBorder.shouldShowImageBorder)(state)) {
@@ -565,9 +574,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
             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;
+              var _handleShowImageEdito;
+              return (_handleShowImageEdito = handleShowImageEditor({
+                api: pluginInjectionApi,
+                mediaPluginState: pluginState
+              })) !== null && _handleShowImageEdito !== void 0 ? _handleShowImageEdito : false;
             },
             supportsViewMode: false
           });
@@ -723,9 +734,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           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;
+            var _handleShowImageEdito2;
+            return (_handleShowImageEdito2 = handleShowImageEditor({
+              api: pluginInjectionApi,
+              mediaPluginState: pluginState
+            })) !== null && _handleShowImageEdito2 !== void 0 ? _handleShowImageEdito2 : false;
           },
           supportsViewMode: false
         }, {
@@ -773,8 +786,8 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
   allowMediaInline = (0, _platformFeatureFlags.fg)('platform_editor_remove_media_inline_feature_flag') ? allowMediaInlineImages : allowMediaInline;
   var mediaPluginState = _pluginKey.stateKey.getState(state);
   var mediaLinkingState = (0, _linking2.getMediaLinkingState)(state);
-  var _ref3 = (_pluginInjectionApi$d3 = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d4 = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : _pluginInjectionApi$d4.actions) !== null && _pluginInjectionApi$d3 !== void 0 ? _pluginInjectionApi$d3 : {},
-    hoverDecoration = _ref3.hoverDecoration;
+  var _ref4 = (_pluginInjectionApi$d3 = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d4 = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : _pluginInjectionApi$d4.actions) !== null && _pluginInjectionApi$d3 !== void 0 ? _pluginInjectionApi$d3 : {},
+    hoverDecoration = _ref4.hoverDecoration;
   if (!mediaPluginState) {
     return;
   }