@atlaskit/editor-plugin-media 8.6.1 → 8.7.1

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

@@ -30,4 +30,26 @@ export const trackMediaPaste = attrs => ({
     identifier
   });
   return tr;
+};
+export const showImageEditor = media => ({
+  tr
+}) => {
+  tr.setMeta(stateKey, {
+    type: ACTIONS.SHOW_IMAGE_EDITOR,
+    imageEditorSelectedMedia: media,
+    isImageEditorVisible: true
+  });
+  tr.setMeta('addToHistory', false);
+  return tr;
+};
+export const hideImageEditor = ({
+  tr
+}) => {
+  tr.setMeta(stateKey, {
+    type: ACTIONS.HIDE_IMAGE_EDITOR,
+    imageEditorSelectedMedia: null,
+    isImageEditorVisible: false
+  });
+  tr.setMeta('addToHistory', false);
+  return tr;
 };

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

@@ -67,6 +67,7 @@ export class MediaPluginStateImplementation {
     _defineProperty(this, "allowInlineImages", false);
     _defineProperty(this, "uploadInProgressSubscriptions", []);
     _defineProperty(this, "uploadInProgressSubscriptionsNotified", false);
+    _defineProperty(this, "isImageEditorVisible", false);
     // this is only a temporary variable, which gets cleared after the last inserted node has been selected
     _defineProperty(this, "lastAddedMediaSingleFileIds", []);
     _defineProperty(this, "destroyed", false);
@@ -568,6 +569,9 @@ export class MediaPluginStateImplementation {
   setResizingWidth(width) {
     this.resizingWidth = width;
   }
+  setImageEditorVisibility(isVisible) {
+    this.isImageEditorVisible = isVisible;
+  }
   updateElement() {
     let newElement;
     const selectedContainer = this.selectedMediaContainerNode();
@@ -771,6 +775,16 @@ export const createPlugin = (_schema, options, getIntl, pluginInjectionApi, node
               nextPluginState = pluginState.clone();
             }
             break;
+          case ACTIONS.SHOW_IMAGE_EDITOR:
+            pluginState.imageEditorSelectedMedia = meta.imageEditorSelectedMedia;
+            pluginState.isImageEditorVisible = meta.isImageEditorVisible;
+            nextPluginState = nextPluginState.clone();
+            break;
+          case 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/es2019/ui/CaptionPlaceholder/index.js

@@ -52,7 +52,7 @@ export const CaptionPlaceholder = /*#__PURE__*/React.forwardRef(({
       // 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: expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? CAPTION_PLACEHOLDER_ID : undefined,
+      id: expValEquals('confluence_compact_text_format', 'isEnabled', true) || expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? CAPTION_PLACEHOLDER_ID : undefined,
       "data-id": CAPTION_PLACEHOLDER_ID,
       "data-testid": "caption-placeholder"
     }, jsx(FormattedMessage
@@ -81,7 +81,7 @@ export const CaptionPlaceholderButton = /*#__PURE__*/React.forwardRef(({
     testId: "caption-placeholder",
     padding: "space.0",
     xcss: placeholderButton
-  }, expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ?
+  }, expValEquals('confluence_compact_text_format', 'isEnabled', true) || expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && 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/es2019/ui/ImageEditor/ModalWrapper.js

@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from 'react';
+import { MediaClient } from '@atlaskit/media-client';
+import { isExternalMedia } from '../toolbar/utils';
+import { ImageEditor } from './index';
+export const RenderImageEditor = ({
+  mediaClientConfig,
+  onClose,
+  selectedNodeAttrs,
+  errorReporter,
+  // TODO: EDITOR-3779 - To implement saving image
+  // eslint-disable-next-line
+  onSave
+}) => {
+  const [imageUrl, setImageUrl] = useState('');
+  useEffect(() => {
+    const getImageUrl = () => {
+      if (isExternalMedia(selectedNodeAttrs)) {
+        // External image - use the URL directly
+        setImageUrl(selectedNodeAttrs.url || '');
+      } else {
+        // File media - use MediaClient to get the image URL
+        const {
+          id,
+          collection = ''
+        } = selectedNodeAttrs;
+        try {
+          const mediaClient = new MediaClient(mediaClientConfig);
+
+          // Subscribe to file state to get file information
+          const subscription = mediaClient.file.getFileState(id, {
+            collectionName: collection
+          }).subscribe(fileState => {
+            if (fileState.status === 'processed' || fileState.status === 'processing') {
+              // Get the image URL from the processed file
+              mediaClient.file.getFileBinaryURL(id, collection).then(url => {
+                setImageUrl(url);
+              });
+            }
+          });
+
+          // Cleanup subscription on unmount
+          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.createElement(ImageEditor, {
+    isOpen: true,
+    onClose: onClose,
+    imageUrl: imageUrl
+  });
+};

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

@@ -0,0 +1,53 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
+import Button from '@atlaskit/button/new';
+import Modal, { ModalBody, ModalFooter, ModalTransition } from '@atlaskit/modal-dialog';
+const imageWrapper = css({
+  maxHeight: 'calc(100vh - 250px)',
+  width: '100%',
+  overflow: 'hidden',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+const imageStyle = css({
+  maxWidth: '100%',
+  maxHeight: 'calc(100vh - 250px)',
+  width: 'auto',
+  height: 'auto',
+  objectFit: 'contain'
+});
+export const ImageEditor = ({
+  isOpen,
+  onClose,
+  imageUrl
+}) => {
+  return jsx(ModalTransition, null, isOpen && jsx(Modal, {
+    onClose: onClose,
+    width: 1800
+  }, jsx("br", null), jsx(ModalBody, null, jsx("div", {
+    css: imageWrapper
+  }, imageUrl && jsx("img", {
+    src: imageUrl,
+    alt: "Edit preview",
+    css: imageStyle
+  }))), jsx(ModalFooter, null, jsx(Button, {
+    appearance: "subtle",
+    onClick: onClose
+  }, jsx(FormattedMessage, {
+    id: "editor.imageEditor.cancel",
+    defaultMessage: "Cancel"
+  })), jsx(Button, {
+    appearance: "primary",
+    onClick: onClose
+  }, jsx(FormattedMessage, {
+    id: "editor.imageEditor.done",
+    defaultMessage: "Done"
+  })))));
+};

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

@@ -109,6 +109,16 @@ export const handleShowMediaViewer = ({
   }
   api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.media.commands.showMediaViewer(selectedNodeAttrs));
 };
+export const handleShowImageEditor = ({
+  api,
+  mediaPluginState
+}) => {
+  const selectedNodeAttrs = getSelectedNearestMediaContainerNodeAttrs(mediaPluginState);
+  if (!selectedNodeAttrs) {
+    return false;
+  }
+  api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.media.commands.showImageEditor(selectedNodeAttrs));
+};
 const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, editorAnalyticsAPI, forceFocusSelector, isViewOnly) => {
   var _pluginInjectionApi$c, _pluginInjectionApi$c2, _pluginInjectionApi$c3;
   const disableDownloadButton = getIsDownloadDisabledByDataSecurityPolicy(mediaPluginState);
@@ -563,9 +573,11 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
             icon: ImageCropIcon,
             title: intl.formatMessage(commonMessages.imageEdit),
             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
           });
@@ -721,9 +733,11 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
           icon: ImageCropIcon,
           title: intl.formatMessage(commonMessages.imageEdit),
           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
         }, {

package/dist/esm/mediaPlugin.js

@@ -6,6 +6,7 @@ import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-che
 import { NodeSelection, PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { lazyMediaView } from './nodeviews/lazy-media';
 import { lazyMediaGroupView } from './nodeviews/lazy-media-group';
 import { lazyMediaInlineView } from './nodeviews/lazy-media-inline';
@@ -16,7 +17,7 @@ import { mediaInlineSpecWithFixedToDOM } from './nodeviews/toDOM-fixes/mediaInli
 import { mediaSingleSpecWithFixedToDOM } from './nodeviews/toDOM-fixes/mediaSingle';
 import { createPlugin as createMediaAltTextPlugin } from './pm-plugins/alt-text';
 import keymapMediaAltTextPlugin from './pm-plugins/alt-text/keymap';
-import { hideMediaViewer, showMediaViewer, trackMediaPaste } from './pm-plugins/commands';
+import { hideMediaViewer, showMediaViewer, trackMediaPaste, hideImageEditor, showImageEditor } from './pm-plugins/commands';
 import keymapPlugin from './pm-plugins/keymap';
 import keymapMediaSinglePlugin from './pm-plugins/keymap-media';
 import linkingPlugin from './pm-plugins/linking';
@@ -26,6 +27,7 @@ import { createPlugin as createMediaPixelResizingPlugin } from './pm-plugins/pix
 import { stateKey } from './pm-plugins/plugin-key';
 import { createMediaIdentifierArray, extractMediaNodes } from './pm-plugins/utils/media-common';
 import { insertMediaAsMediaSingle as _insertMediaAsMediaSingle } from './pm-plugins/utils/media-single';
+import { RenderImageEditor } from './ui/ImageEditor/ModalWrapper';
 import { MediaPickerComponents } from './ui/MediaPicker';
 import { RenderMediaViewer } from './ui/MediaViewer/PortalWrapper';
 import { floatingToolbar as _floatingToolbar } from './ui/toolbar';
@@ -95,10 +97,36 @@ var MediaViewerFunctionalComponent = function MediaViewerFunctionalComponent(_re
     items: mediaItems
   });
 };
-export var 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 = 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.createElement(RenderImageEditor, {
+    mediaClientConfig: mediaClientConfig,
+    onClose: handleOnClose,
+    selectedNodeAttrs: imageEditorSelectedMedia
+  });
+};
+export var 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 {
@@ -139,8 +167,8 @@ export var 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(stateKey, {
             mediaProvider: provider
           });
@@ -150,19 +178,21 @@ export var mediaPlugin = function mediaPlugin(_ref3) {
     commands: {
       showMediaViewer: showMediaViewer,
       hideMediaViewer: hideMediaViewer,
-      trackMediaPaste: trackMediaPaste
+      trackMediaPaste: trackMediaPaste,
+      showImageEditor: showImageEditor,
+      hideImageEditor: 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 = fg('platform_editor_remove_media_inline_feature_flag') ? allowMediaInlineImages : getMediaFeatureFlag('mediaInline', mediaFeatureFlags);
       var mediaSingleOption = {
         withCaption: allowCaptions,
@@ -196,16 +226,16 @@ export var 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 createPlugin(schema, {
             providerFactory: providerFactory,
             nodeViews: {
@@ -224,17 +254,17 @@ export var 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 keymapPlugin(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 keymapMediaSinglePlugin(schema);
           }
         });
@@ -246,9 +276,9 @@ export var 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 keymapMediaAltTextPlugin(schema, api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions);
           }
         });
@@ -256,15 +286,15 @@ export var 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 linkingPlugin(dispatch);
           }
         });
         pmPlugins.push({
           name: 'mediaLinkingKeymap',
-          plugin: function plugin(_ref1) {
-            var schema = _ref1.schema;
+          plugin: function plugin(_ref10) {
+            var schema = _ref10.schema;
             return keymapLinkingPlugin(schema);
           }
         });
@@ -306,13 +336,16 @@ export var 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MediaViewerFunctionalComponent, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, (options === null || options === void 0 ? void 0 : options.allowImageEditing) && expValEquals('platform_editor_add_image_editing', 'isEnabled', true) && /*#__PURE__*/React.createElement(ImageEditorFunctionalComponent, {
+        api: api,
+        editorView: editorView
+      }), /*#__PURE__*/React.createElement(MediaViewerFunctionalComponent, {
         api: api,
         editorView: editorView
       }), /*#__PURE__*/React.createElement(MediaPickerFunctionalComponent, {
@@ -321,8 +354,8 @@ export var 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.createElement(ToolbarMedia, {
         isDisabled: disabled,
         isReducedSpacing: true,

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

@@ -1,5 +1,7 @@
 export var 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/esm/pm-plugins/commands.js

@@ -31,4 +31,26 @@ export var trackMediaPaste = function trackMediaPaste(attrs) {
     });
     return tr;
   };
+};
+export var showImageEditor = function showImageEditor(media) {
+  return function (_ref4) {
+    var tr = _ref4.tr;
+    tr.setMeta(stateKey, {
+      type: ACTIONS.SHOW_IMAGE_EDITOR,
+      imageEditorSelectedMedia: media,
+      isImageEditorVisible: true
+    });
+    tr.setMeta('addToHistory', false);
+    return tr;
+  };
+};
+export var hideImageEditor = function hideImageEditor(_ref5) {
+  var tr = _ref5.tr;
+  tr.setMeta(stateKey, {
+    type: ACTIONS.HIDE_IMAGE_EDITOR,
+    imageEditorSelectedMedia: null,
+    isImageEditorVisible: false
+  });
+  tr.setMeta('addToHistory', false);
+  return tr;
 };

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

@@ -82,6 +82,7 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
     _defineProperty(this, "allowInlineImages", false);
     _defineProperty(this, "uploadInProgressSubscriptions", []);
     _defineProperty(this, "uploadInProgressSubscriptionsNotified", false);
+    _defineProperty(this, "isImageEditorVisible", false);
     // this is only a temporary variable, which gets cleared after the last inserted node has been selected
     _defineProperty(this, "lastAddedMediaSingleFileIds", []);
     _defineProperty(this, "destroyed", false);
@@ -629,6 +630,11 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
     value: function setResizingWidth(width) {
       this.resizingWidth = width;
     }
+  }, {
+    key: "setImageEditorVisibility",
+    value: function setImageEditorVisibility(isVisible) {
+      this.isImageEditorVisible = isVisible;
+    }
   }, {
     key: "updateElement",
     value: function updateElement() {
@@ -870,6 +876,16 @@ export var createPlugin = function createPlugin(_schema, options, getIntl, plugi
               nextPluginState = pluginState.clone();
             }
             break;
+          case ACTIONS.SHOW_IMAGE_EDITOR:
+            pluginState.imageEditorSelectedMedia = meta.imageEditorSelectedMedia;
+            pluginState.isImageEditorVisible = meta.isImageEditorVisible;
+            nextPluginState = nextPluginState.clone();
+            break;
+          case 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/esm/ui/CaptionPlaceholder/index.js

@@ -47,7 +47,7 @@ export var CaptionPlaceholder = /*#__PURE__*/React.forwardRef(function (_ref, re
       // 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: expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? CAPTION_PLACEHOLDER_ID : undefined,
+      id: expValEquals('confluence_compact_text_format', 'isEnabled', true) || expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? CAPTION_PLACEHOLDER_ID : undefined,
       "data-id": CAPTION_PLACEHOLDER_ID,
       "data-testid": "caption-placeholder"
     }, jsx(FormattedMessage
@@ -75,7 +75,7 @@ export var CaptionPlaceholderButton = /*#__PURE__*/React.forwardRef(function (_r
     testId: "caption-placeholder",
     padding: "space.0",
     xcss: placeholderButton
-  }, expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ?
+  }, expValEquals('confluence_compact_text_format', 'isEnabled', true) || expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && 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/esm/ui/ImageEditor/ModalWrapper.js

@@ -0,0 +1,60 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useEffect, useState } from 'react';
+import { MediaClient } from '@atlaskit/media-client';
+import { isExternalMedia } from '../toolbar/utils';
+import { ImageEditor } from './index';
+export var RenderImageEditor = function RenderImageEditor(_ref) {
+  var mediaClientConfig = _ref.mediaClientConfig,
+    onClose = _ref.onClose,
+    selectedNodeAttrs = _ref.selectedNodeAttrs,
+    errorReporter = _ref.errorReporter,
+    onSave = _ref.onSave;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    imageUrl = _useState2[0],
+    setImageUrl = _useState2[1];
+  useEffect(function () {
+    var getImageUrl = function getImageUrl() {
+      if (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(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.createElement(ImageEditor, {
+    isOpen: true,
+    onClose: onClose,
+    imageUrl: imageUrl
+  });
+};