@atlaskit/editor-plugin-media 8.6.0 → 8.7.0

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

@@ -27,10 +27,10 @@ import { isFileIdentifier } from '@atlaskit/media-client';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { updateMediaNodeAttrs } from '../pm-plugins/commands/helpers';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-namespace
 import * as helpers from '../pm-plugins/commands/helpers';
+import { updateMediaNodeAttrs } from '../pm-plugins/commands/helpers';
 import { getIdentifier, getMediaFromSupportedMediaNodesFromSelection, isNodeDoubleClickSupportedInLivePagesViewMode, removeMediaNode, splitMediaGroup } from '../pm-plugins/utils/media-common';
 import { insertMediaGroupNode, insertMediaInlineNode } from '../pm-plugins/utils/media-files';
 import { getMediaNodeInsertionType } from '../pm-plugins/utils/media-inline';
@@ -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);
@@ -477,19 +478,14 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
   return _createClass(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 && 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;
@@ -634,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() {
@@ -875,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
+  });
+};

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

@@ -0,0 +1,52 @@
+/**
+ * @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';
+var imageWrapper = css({
+  maxHeight: 'calc(100vh - 250px)',
+  width: '100%',
+  overflow: 'hidden',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+var imageStyle = css({
+  maxWidth: '100%',
+  maxHeight: 'calc(100vh - 250px)',
+  width: 'auto',
+  height: 'auto',
+  objectFit: 'contain'
+});
+export var ImageEditor = function ImageEditor(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    imageUrl = _ref.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/esm/ui/toolbar/index.js

@@ -112,6 +112,15 @@ export var handleShowMediaViewer = function handleShowMediaViewer(_ref) {
   }
   api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.media.commands.showMediaViewer(selectedNodeAttrs));
 };
+export var handleShowImageEditor = function handleShowImageEditor(_ref2) {
+  var api = _ref2.api,
+    mediaPluginState = _ref2.mediaPluginState;
+  var selectedNodeAttrs = 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 = getIsDownloadDisabledByDataSecurityPolicy(mediaPluginState);
@@ -269,8 +278,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 = areToolbarFlagsEnabled(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar));
   var disableDownloadButton = getIsDownloadDisabledByDataSecurityPolicy(pluginState);
   if (shouldShowImageBorder(state)) {
@@ -556,9 +565,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
             icon: ImageCropIcon,
             title: intl.formatMessage(commonMessages.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
           });
@@ -714,9 +725,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           icon: ImageCropIcon,
           title: intl.formatMessage(commonMessages.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
         }, {
@@ -764,8 +777,8 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
   allowMediaInline = fg('platform_editor_remove_media_inline_feature_flag') ? allowMediaInlineImages : allowMediaInline;
   var mediaPluginState = stateKey.getState(state);
   var mediaLinkingState = 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;
   }

package/dist/types/mediaPluginType.d.ts

@@ -59,7 +59,9 @@ export type MediaNextEditorPluginType = NextEditorPlugin<'media', {
         setProvider: (provider: Promise<MediaProvider>) => boolean;
     };
     commands: {
+        hideImageEditor: EditorCommand;
         hideMediaViewer: EditorCommand;
+        showImageEditor: (media: MediaADFAttrs) => EditorCommand;
         showMediaViewer: (media: MediaADFAttrs) => EditorCommand;
         trackMediaPaste: (attrs: MediaADFAttrs) => EditorCommand;
     };

package/dist/types/pm-plugins/actions.d.ts

@@ -2,4 +2,6 @@ export declare const ACTIONS: {
     SHOW_MEDIA_VIEWER: string;
     HIDE_MEDIA_VIEWER: string;
     TRACK_MEDIA_PASTE: string;
+    SHOW_IMAGE_EDITOR: string;
+    HIDE_IMAGE_EDITOR: string;
 };

package/dist/types/pm-plugins/commands.d.ts

@@ -3,3 +3,5 @@ import type { EditorCommand } from '@atlaskit/editor-common/types';
 export declare const showMediaViewer: (media: MediaADFAttrs) => EditorCommand;
 export declare const hideMediaViewer: EditorCommand;
 export declare const trackMediaPaste: (attrs: MediaADFAttrs) => EditorCommand;
+export declare const showImageEditor: (media: MediaADFAttrs) => EditorCommand;
+export declare const hideImageEditor: EditorCommand;

package/dist/types/pm-plugins/main.d.ts

@@ -1,5 +1,5 @@
 import type { IntlShape } from 'react-intl-next';
-import type { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
+import type { MediaADFAttrs, RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
 import type { InsertMediaVia } from '@atlaskit/editor-common/analytics';
 import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
@@ -12,7 +12,7 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { type Identifier } from '@atlaskit/media-client';
 import type { MediaClientConfig } from '@atlaskit/media-core';
 import type { MediaNextEditorPluginType } from '../mediaPluginType';
-import type { MediaOptions, MediaState, MediaStateEventSubscriber, getPosHandlerNode as ProsemirrorGetPosHandler } from '../types';
+import type { getPosHandlerNode as ProsemirrorGetPosHandler, MediaOptions, MediaState, MediaStateEventSubscriber } from '../types';
 import type { MediaPluginOptions } from '../types/media-plugin-options';
 import PickerFacade from './picker-facade';
 import type { MediaNodeWithPosHandler, MediaPluginState } from './types';
@@ -41,6 +41,8 @@ export declare class MediaPluginStateImplementation implements MediaPluginState
         (isUploading: boolean): void;
     }[];
     uploadInProgressSubscriptionsNotified: boolean;
+    isImageEditorVisible?: boolean;
+    imageEditorSelectedMedia?: MediaADFAttrs;
     lastAddedMediaSingleFileIds: {
         id: string;
         selectionPosition: number;
@@ -64,7 +66,7 @@ export declare class MediaPluginStateImplementation implements MediaPluginState
     pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined;
     singletonCreatedAt: number;
     constructor(state: EditorState, options: MediaPluginOptions, mediaOptions: MediaOptions | undefined, dispatch: Dispatch | undefined, pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined);
-    clone(): this;
+    clone(): MediaPluginStateImplementation;
     subscribeToUploadInProgressState(fn: (isUploading: boolean) => void): void;
     unsubscribeFromUploadInProgressState(fn: (isUploading: boolean) => void): void;
     private previousMediaProvider;
@@ -72,6 +74,7 @@ export declare class MediaPluginStateImplementation implements MediaPluginState
     getMediaOptions: () => MediaPluginOptions;
     setIsResizing(isResizing: boolean): void;
     setResizingWidth(width: number): void;
+    setImageEditorVisibility(isVisible: boolean): void;
     updateElement(): void;
     private isMediaSchemaNode;
     private getDomElement;

package/dist/types/pm-plugins/types.d.ts

@@ -32,9 +32,11 @@ export interface MediaPluginState {
     handleMediaNodeRemoval: (node: PMNode | undefined, getPos: ProsemirrorGetPosHandler) => void;
     handleMediaNodeUnmount: (oldNode: PMNode) => void;
     ignoreLinks: boolean;
+    imageEditorSelectedMedia?: MediaADFAttrs;
     insertFile: (mediaState: MediaState, onMediaStateChanged: MediaStateEventSubscriber, pickerType?: string, insertMediaVia?: InsertMediaVia) => void;
     isFullscreen: boolean;
     isIdentifierInEditorScope: (identifier: Identifier) => boolean;
+    isImageEditorVisible?: boolean;
     isMediaViewerVisible?: boolean;
     isResizing: boolean;
     lastAddedMediaSingleFileIds: {
@@ -56,6 +58,7 @@ export interface MediaPluginState {
     resizingWidth: number;
     selectedMediaContainerNode: () => PMNode | undefined;
     setBrowseFn: (browseFn: () => void) => void;
+    setImageEditorVisibility: (isVisible: boolean) => void;
     setIsResizing(isResizing: boolean): void;
     setMediaProvider: (mediaProvider?: Promise<MediaProvider>) => Promise<void>;
     setResizingWidth(width: number): void;

package/dist/types/ui/ImageEditor/ModalWrapper.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { MediaADFAttrs } from '@atlaskit/adf-schema';
+import type { ErrorReporter } from '@atlaskit/editor-common/error-reporter';
+import type { MediaClientConfig } from '@atlaskit/media-client';
+interface RenderImageEditorProps {
+    errorReporter?: ErrorReporter;
+    mediaClientConfig: MediaClientConfig;
+    onClose: () => void;
+    onSave?: (updatedAttrs: MediaADFAttrs) => void;
+    selectedNodeAttrs: MediaADFAttrs;
+}
+export declare const RenderImageEditor: ({ mediaClientConfig, onClose, selectedNodeAttrs, errorReporter, onSave, }: RenderImageEditorProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,12 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { jsx } from '@emotion/react';
+interface ImageEditModalProps {
+    imageUrl?: string;
+    isOpen: boolean;
+    onClose: () => void;
+}
+export declare const ImageEditor: ({ isOpen, onClose, imageUrl, }: ImageEditModalProps) => jsx.JSX.Element;
+export {};

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

@@ -8,5 +8,9 @@ export declare const handleShowMediaViewer: ({ api, mediaPluginState, }: {
     api: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined;
     mediaPluginState: MediaPluginState;
 }) => false | undefined;
+export declare const handleShowImageEditor: ({ api, mediaPluginState, }: {
+    api: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined;
+    mediaPluginState: MediaPluginState;
+}) => false | undefined;
 export declare const overflowDropdwonBtnTriggerTestId = "media-overflow-dropdown-trigger";
 export declare const floatingToolbar: (state: EditorState, intl: IntlShape, options: MediaFloatingToolbarOptions | undefined, pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined) => FloatingToolbarConfig | undefined;

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

@@ -59,7 +59,9 @@ export type MediaNextEditorPluginType = NextEditorPlugin<'media', {
         setProvider: (provider: Promise<MediaProvider>) => boolean;
     };
     commands: {
+        hideImageEditor: EditorCommand;
         hideMediaViewer: EditorCommand;
+        showImageEditor: (media: MediaADFAttrs) => EditorCommand;
         showMediaViewer: (media: MediaADFAttrs) => EditorCommand;
         trackMediaPaste: (attrs: MediaADFAttrs) => EditorCommand;
     };

package/dist/types-ts4.5/pm-plugins/actions.d.ts

@@ -2,4 +2,6 @@ export declare const ACTIONS: {
     SHOW_MEDIA_VIEWER: string;
     HIDE_MEDIA_VIEWER: string;
     TRACK_MEDIA_PASTE: string;
+    SHOW_IMAGE_EDITOR: string;
+    HIDE_IMAGE_EDITOR: string;
 };

package/dist/types-ts4.5/pm-plugins/commands.d.ts

@@ -3,3 +3,5 @@ import type { EditorCommand } from '@atlaskit/editor-common/types';
 export declare const showMediaViewer: (media: MediaADFAttrs) => EditorCommand;
 export declare const hideMediaViewer: EditorCommand;
 export declare const trackMediaPaste: (attrs: MediaADFAttrs) => EditorCommand;
+export declare const showImageEditor: (media: MediaADFAttrs) => EditorCommand;
+export declare const hideImageEditor: EditorCommand;

package/dist/types-ts4.5/pm-plugins/main.d.ts

@@ -1,5 +1,5 @@
 import type { IntlShape } from 'react-intl-next';
-import type { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
+import type { MediaADFAttrs, RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
 import type { InsertMediaVia } from '@atlaskit/editor-common/analytics';
 import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
@@ -12,7 +12,7 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { type Identifier } from '@atlaskit/media-client';
 import type { MediaClientConfig } from '@atlaskit/media-core';
 import type { MediaNextEditorPluginType } from '../mediaPluginType';
-import type { MediaOptions, MediaState, MediaStateEventSubscriber, getPosHandlerNode as ProsemirrorGetPosHandler } from '../types';
+import type { getPosHandlerNode as ProsemirrorGetPosHandler, MediaOptions, MediaState, MediaStateEventSubscriber } from '../types';
 import type { MediaPluginOptions } from '../types/media-plugin-options';
 import PickerFacade from './picker-facade';
 import type { MediaNodeWithPosHandler, MediaPluginState } from './types';
@@ -41,6 +41,8 @@ export declare class MediaPluginStateImplementation implements MediaPluginState
         (isUploading: boolean): void;
     }[];
     uploadInProgressSubscriptionsNotified: boolean;
+    isImageEditorVisible?: boolean;
+    imageEditorSelectedMedia?: MediaADFAttrs;
     lastAddedMediaSingleFileIds: {
         id: string;
         selectionPosition: number;
@@ -64,7 +66,7 @@ export declare class MediaPluginStateImplementation implements MediaPluginState
     pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined;
     singletonCreatedAt: number;
     constructor(state: EditorState, options: MediaPluginOptions, mediaOptions: MediaOptions | undefined, dispatch: Dispatch | undefined, pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined);
-    clone(): this;
+    clone(): MediaPluginStateImplementation;
     subscribeToUploadInProgressState(fn: (isUploading: boolean) => void): void;
     unsubscribeFromUploadInProgressState(fn: (isUploading: boolean) => void): void;
     private previousMediaProvider;
@@ -72,6 +74,7 @@ export declare class MediaPluginStateImplementation implements MediaPluginState
     getMediaOptions: () => MediaPluginOptions;
     setIsResizing(isResizing: boolean): void;
     setResizingWidth(width: number): void;
+    setImageEditorVisibility(isVisible: boolean): void;
     updateElement(): void;
     private isMediaSchemaNode;
     private getDomElement;

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

@@ -32,9 +32,11 @@ export interface MediaPluginState {
     handleMediaNodeRemoval: (node: PMNode | undefined, getPos: ProsemirrorGetPosHandler) => void;
     handleMediaNodeUnmount: (oldNode: PMNode) => void;
     ignoreLinks: boolean;
+    imageEditorSelectedMedia?: MediaADFAttrs;
     insertFile: (mediaState: MediaState, onMediaStateChanged: MediaStateEventSubscriber, pickerType?: string, insertMediaVia?: InsertMediaVia) => void;
     isFullscreen: boolean;
     isIdentifierInEditorScope: (identifier: Identifier) => boolean;
+    isImageEditorVisible?: boolean;
     isMediaViewerVisible?: boolean;
     isResizing: boolean;
     lastAddedMediaSingleFileIds: {
@@ -56,6 +58,7 @@ export interface MediaPluginState {
     resizingWidth: number;
     selectedMediaContainerNode: () => PMNode | undefined;
     setBrowseFn: (browseFn: () => void) => void;
+    setImageEditorVisibility: (isVisible: boolean) => void;
     setIsResizing(isResizing: boolean): void;
     setMediaProvider: (mediaProvider?: Promise<MediaProvider>) => Promise<void>;
     setResizingWidth(width: number): void;

package/dist/types-ts4.5/ui/ImageEditor/ModalWrapper.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { MediaADFAttrs } from '@atlaskit/adf-schema';
+import type { ErrorReporter } from '@atlaskit/editor-common/error-reporter';
+import type { MediaClientConfig } from '@atlaskit/media-client';
+interface RenderImageEditorProps {
+    errorReporter?: ErrorReporter;
+    mediaClientConfig: MediaClientConfig;
+    onClose: () => void;
+    onSave?: (updatedAttrs: MediaADFAttrs) => void;
+    selectedNodeAttrs: MediaADFAttrs;
+}
+export declare const RenderImageEditor: ({ mediaClientConfig, onClose, selectedNodeAttrs, errorReporter, onSave, }: RenderImageEditorProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,12 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { jsx } from '@emotion/react';
+interface ImageEditModalProps {
+    imageUrl?: string;
+    isOpen: boolean;
+    onClose: () => void;
+}
+export declare const ImageEditor: ({ isOpen, onClose, imageUrl, }: ImageEditModalProps) => jsx.JSX.Element;
+export {};

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

@@ -8,5 +8,9 @@ export declare const handleShowMediaViewer: ({ api, mediaPluginState, }: {
     api: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined;
     mediaPluginState: MediaPluginState;
 }) => false | undefined;
+export declare const handleShowImageEditor: ({ api, mediaPluginState, }: {
+    api: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined;
+    mediaPluginState: MediaPluginState;
+}) => false | undefined;
 export declare const overflowDropdwonBtnTriggerTestId = "media-overflow-dropdown-trigger";
 export declare const floatingToolbar: (state: EditorState, intl: IntlShape, options: MediaFloatingToolbarOptions | undefined, pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined) => FloatingToolbarConfig | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "8.6.0",
+	"version": "8.7.0",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -51,9 +51,9 @@
 		"@atlaskit/editor-prosemirror": "^7.2.0",
 		"@atlaskit/editor-shared-styles": "^3.10.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/form": "^15.0.0",
-		"@atlaskit/icon": "^29.2.0",
-		"@atlaskit/icon-lab": "^5.12.0",
+		"@atlaskit/form": "^15.1.0",
+		"@atlaskit/icon": "^29.3.0",
+		"@atlaskit/icon-lab": "^5.13.0",
 		"@atlaskit/media-card": "^79.11.0",
 		"@atlaskit/media-client": "^35.7.0",
 		"@atlaskit/media-client-react": "^4.1.0",
@@ -62,11 +62,12 @@
 		"@atlaskit/media-picker": "^70.1.0",
 		"@atlaskit/media-ui": "^28.7.0",
 		"@atlaskit/media-viewer": "^52.5.0",
+		"@atlaskit/modal-dialog": "^14.9.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^16.4.0",
 		"@atlaskit/textfield": "^8.2.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^15.12.0",
+		"@atlaskit/tmp-editor-statsig": "^15.15.0",
 		"@atlaskit/tokens": "^8.6.0",
 		"@atlaskit/tooltip": "^20.11.0",
 		"@babel/runtime": "^7.0.0",
@@ -78,7 +79,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.45.0",
+		"@atlaskit/editor-common": "^110.46.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",