@atlaskit/editor-plugin-media 2.6.7 → 2.7.1

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

@@ -4,6 +4,8 @@ import { injectIntl } from 'react-intl-next';
 import { VIEW_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { CommentBadge as CommentBadgeComponent, CommentBadgeNext } from '@atlaskit/editor-common/media-single';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 var CommentBadgeWrapper = function CommentBadgeWrapper(_ref) {
   var api = _ref.api,
     mediaNode = _ref.mediaNode,
@@ -16,23 +18,37 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     entered = _useState2[0],
     setEntered = _useState2[1];
-  var _useSharedPluginState = useSharedPluginState(api, ['annotation']),
+  var _useSharedPluginState = useSharedPluginState(api, ['annotation'], {
+      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+    }),
     annotationState = _useSharedPluginState.annotationState;
+  var selectedAnnotationsSelector = useSharedPluginStateSelector(api, 'annotation.selectedAnnotations', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isInlineCommentViewClosedSelector = useSharedPluginStateSelector(api, 'annotation.isInlineCommentViewClosed', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var annotationsSelector = useSharedPluginStateSelector(api, 'annotation.annotations', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var selectedAnnotations = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectedAnnotationsSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.selectedAnnotations;
+  var isInlineCommentViewClosed = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isInlineCommentViewClosedSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.isInlineCommentViewClosed;
+  var annotations = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? annotationsSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.annotations;
   var _view$state$schema = view.state.schema,
     media = _view$state$schema.nodes.media,
     annotation = _view$state$schema.marks.annotation,
     state = view.state,
     dispatch = view.dispatch;
   var status = useMemo(function () {
-    if (!(annotationState !== null && annotationState !== void 0 && annotationState.selectedAnnotations) || !mediaNode) {
+    if (!selectedAnnotations || !mediaNode) {
       return 'default';
     }
-    return annotationState.selectedAnnotations.some(function (annotation) {
+    return selectedAnnotations.some(function (annotation) {
       return !!mediaNode.marks.find(function (mark) {
         return mark.attrs.id === annotation.id;
       });
-    }) && !annotationState.isInlineCommentViewClosed ? 'active' : 'default';
-  }, [annotationState, mediaNode]);
+    }) && !isInlineCommentViewClosed ? 'active' : 'default';
+  }, [selectedAnnotations, isInlineCommentViewClosed, mediaNode]);
   var onClick = useCallback(function () {
     if (api.annotation && mediaNode) {
       var showCommentForBlockNode = api.annotation.actions.showCommentForBlockNode;
@@ -40,8 +56,8 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref) {
     }
   }, [api.annotation, dispatch, mediaNode, state]);
   var pos = getPos();
-  var hasNoComments = !Number.isFinite(pos) || !(annotationState !== null && annotationState !== void 0 && annotationState.annotations) || !mediaNode || mediaNode.type !== media || mediaNode.marks.every(function (maybeAnnotation) {
-    return maybeAnnotation.type !== annotation || !(maybeAnnotation.attrs.id in annotationState.annotations) || annotationState.annotations[maybeAnnotation.attrs.id];
+  var hasNoComments = !Number.isFinite(pos) || !annotations || !mediaNode || mediaNode.type !== media || mediaNode.marks.every(function (maybeAnnotation) {
+    return maybeAnnotation.type !== annotation || !(maybeAnnotation.attrs.id in annotations) || annotations[maybeAnnotation.attrs.id];
   });
   if (!isDrafting && hasNoComments || !mediaNode) {
     return null;
@@ -88,23 +104,37 @@ export var CommentBadgeNextWrapper = function CommentBadgeNextWrapper(_ref2) {
     _useState4 = _slicedToArray(_useState3, 2),
     entered = _useState4[0],
     setEntered = _useState4[1];
-  var _useSharedPluginState2 = useSharedPluginState(api, ['annotation']),
+  var _useSharedPluginState2 = useSharedPluginState(api, ['annotation'], {
+      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+    }),
     annotationState = _useSharedPluginState2.annotationState;
+  var selectedAnnotationsSelector = useSharedPluginStateSelector(api, 'annotation.selectedAnnotations', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isInlineCommentViewClosedSelector = useSharedPluginStateSelector(api, 'annotation.isInlineCommentViewClosed', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var annotationsSelector = useSharedPluginStateSelector(api, 'annotation.annotations', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var selectedAnnotations = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectedAnnotationsSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.selectedAnnotations;
+  var isInlineCommentViewClosed = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isInlineCommentViewClosedSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.isInlineCommentViewClosed;
+  var annotations = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? annotationsSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.annotations;
   var _view$state$schema2 = view.state.schema,
     media = _view$state$schema2.nodes.media,
     annotation = _view$state$schema2.marks.annotation,
     state = view.state,
     dispatch = view.dispatch;
   var status = useMemo(function () {
-    if (!(annotationState !== null && annotationState !== void 0 && annotationState.selectedAnnotations) || !mediaNode) {
+    if (!selectedAnnotations || !mediaNode) {
       return 'default';
     }
-    return annotationState.selectedAnnotations.some(function (annotation) {
+    return selectedAnnotations.some(function (annotation) {
       return !!mediaNode.marks.find(function (mark) {
         return mark.attrs.id === annotation.id;
       });
-    }) && !annotationState.isInlineCommentViewClosed ? 'active' : 'default';
-  }, [annotationState, mediaNode]);
+    }) && !isInlineCommentViewClosed ? 'active' : 'default';
+  }, [selectedAnnotations, isInlineCommentViewClosed, mediaNode]);
   var onClick = useCallback(function () {
     if (api.annotation && mediaNode) {
       var showCommentForBlockNode = api.annotation.actions.showCommentForBlockNode;
@@ -112,8 +142,8 @@ export var CommentBadgeNextWrapper = function CommentBadgeNextWrapper(_ref2) {
     }
   }, [api.annotation, dispatch, mediaNode, state]);
   var pos = getPos();
-  var hasNoComments = !Number.isFinite(pos) || !(annotationState !== null && annotationState !== void 0 && annotationState.annotations) || !mediaNode || mediaNode.type !== media || mediaNode.marks.every(function (maybeAnnotation) {
-    return maybeAnnotation.type !== annotation || !(maybeAnnotation.attrs.id in annotationState.annotations) || annotationState.annotations[maybeAnnotation.attrs.id];
+  var hasNoComments = !Number.isFinite(pos) || !annotations || !mediaNode || mediaNode.type !== media || mediaNode.marks.every(function (maybeAnnotation) {
+    return maybeAnnotation.type !== annotation || !(maybeAnnotation.attrs.id in annotations) || annotations[maybeAnnotation.attrs.id];
   });
   if (!isDrafting && hasNoComments || !mediaNode) {
     return null;

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

@@ -8,6 +8,8 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { BrowserWrapper } from './BrowserWrapper';
 import { ClipboardWrapper } from './ClipboardWrapper';
 import { DropzoneWrapper } from './DropzoneWrapper';
@@ -19,9 +21,19 @@ var MediaPicker = function MediaPicker(_ref) {
     mediaState = _ref.mediaState,
     onBrowseFn = _ref.onBrowseFn,
     editorDomElement = _ref.editorDomElement;
-  var _useSharedPluginState = useSharedPluginState(api, ['focus', 'connectivity']),
+  var _useSharedPluginState = useSharedPluginState(api, ['focus', 'connectivity'], {
+      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+    }),
     focusState = _useSharedPluginState.focusState,
     connectivityState = _useSharedPluginState.connectivityState;
+  var hasFocusSelector = useSharedPluginStateSelector(api, 'focus.hasFocus', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var connectivityModeSelector = useSharedPluginStateSelector(api, 'connectivity.mode', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var hasFocus = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? hasFocusSelector : focusState === null || focusState === void 0 ? void 0 : focusState.hasFocus;
+  var connectivityMode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? connectivityModeSelector : connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode;
   var featureFlags = mediaState.mediaOptions && mediaState.mediaOptions.featureFlags;
 
   // Ignored via go/ees005
@@ -36,7 +48,7 @@ var MediaPicker = function MediaPicker(_ref) {
    * as stopImmediatePropagation could cause race condition issues
    */
   var container = editorParent;
-  var clipboard = focusState !== null && focusState !== void 0 && focusState.hasFocus ? /*#__PURE__*/React.createElement(ClipboardWrapper, {
+  var clipboard = hasFocus ? /*#__PURE__*/React.createElement(ClipboardWrapper, {
     mediaState: mediaState,
     featureFlags: featureFlags,
     container: container
@@ -45,7 +57,7 @@ var MediaPicker = function MediaPicker(_ref) {
     mediaState: mediaState,
     isActive: !isPopupOpened &&
     // If we're offline don't show the dropzone
-    (connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode) !== 'offline',
+    connectivityMode !== 'offline',
     featureFlags: featureFlags,
     editorDomElement: editorDomElement,
     appearance: appearance

package/dist/esm/ui/MediaViewer/MediaViewerContainer.js

@@ -9,7 +9,7 @@ import React, { Fragment, useEffect, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { isVideo } from '../../pm-plugins/utils/is-type';
-import { getSelectedNearestMediaContainerNodeAttrs } from '../../ui/toolbar/utils';
+import { getSelectedNearestMediaContainerNodeAttrsFunction } from '../../ui/toolbar/utils';
 import { RenderMediaViewer } from './PortalWrapper';
 var interactiveStyles = css({
   cursor: 'pointer'
@@ -18,7 +18,8 @@ var mediaViewerContainerTestID = 'media-viewer-container-test';
 export var MediaViewerContainer = function MediaViewerContainer(_ref) {
   var _mediaNode$firstChild;
   var mediaNode = _ref.mediaNode,
-    mediaPluginState = _ref.mediaPluginState,
+    selectedMediaContainerNode = _ref.selectedMediaContainerNode,
+    mediaClientConfig = _ref.mediaClientConfig,
     _ref$isEditorViewMode = _ref.isEditorViewMode,
     isEditorViewMode = _ref$isEditorViewMode === void 0 ? false : _ref$isEditorViewMode,
     _ref$isSelected = _ref.isSelected,
@@ -33,8 +34,7 @@ export var MediaViewerContainer = function MediaViewerContainer(_ref) {
   useEffect(function () {
     setShowMediaViewer(isSelected);
   }, [isSelected]);
-  var selectedNodeAttrs = getSelectedNearestMediaContainerNodeAttrs(mediaPluginState);
-  var mediaClientConfig = mediaPluginState.mediaClientConfig;
+  var selectedNodeAttrs = getSelectedNearestMediaContainerNodeAttrsFunction(selectedMediaContainerNode);
   var showMediaViewer = function showMediaViewer() {
     setShowMediaViewer(true);
   };

package/dist/esm/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -21,6 +21,7 @@ import { jsx } from '@emotion/react';
 import classnames from 'classnames';
 import throttle from 'lodash/throttle';
 import memoizeOne from 'memoize-one';
+import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { findClosestSnap, generateDefaultGuidelines, generateDynamicGuidelines, getGuidelineSnaps, getGuidelinesWithHighlights, getGuidelineTypeFromKey, getRelativeGuidelines, getRelativeGuideSnaps } from '@atlaskit/editor-common/guideline';
 import { calcMediaSingleMaxWidth, DEFAULT_IMAGE_WIDTH, MEDIA_SINGLE_ADJACENT_HANDLE_MARGIN, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
@@ -536,7 +537,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       var resizerNextClassName = classnames(className, resizerStyles);
       var isNestedNode = this.isAdjacentMode();
       var handlePositioning = this.getHandlePositioning();
-      var maxWidth = this.getMaxWidth();
+      var maxWidth = isSSR() && size.width && fg('platform_editor_fix_image_size_diff_during_ssr') ? undefined : this.getMaxWidth();
       var minWidth = this.calcMinWidth(isVideoFile, lineLength);
 
       // while is not resizing, we take 100% as min-width if the container width is less than the min-width

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

@@ -3,10 +3,12 @@ import { injectIntl } from 'react-intl-next';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { toolbarMediaMessages } from '@atlaskit/editor-common/media';
 import { TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import AttachmentIcon from '@atlaskit/icon/core/migration/attachment--editor-attachment';
-var onClickMediaButton = function onClickMediaButton(pluginState) {
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+var onClickMediaButton = function onClickMediaButton(showMediaPicker) {
   return function () {
-    pluginState.showMediaPicker();
+    showMediaPicker();
     return true;
   };
 };
@@ -15,15 +17,25 @@ var ToolbarMedia = function ToolbarMedia(_ref) {
     isReducedSpacing = _ref.isReducedSpacing,
     intl = _ref.intl,
     api = _ref.api;
-  var _useSharedPluginState = useSharedPluginState(api, ['media']),
+  var _useSharedPluginState = useSharedPluginState(api, ['media'], {
+      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+    }),
     mediaState = _useSharedPluginState.mediaState;
-  if (!(mediaState !== null && mediaState !== void 0 && mediaState.allowsUploads)) {
+  var allowsUploadsSelector = useSharedPluginStateSelector(api, 'media.allowsUploads', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var showMediaPickerSelector = useSharedPluginStateSelector(api, 'media.showMediaPicker', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var allowsUploads = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? allowsUploadsSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.allowsUploads;
+  var showMediaPicker = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? showMediaPickerSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.showMediaPicker;
+  if (!allowsUploads || !showMediaPicker) {
     return null;
   }
   var toolbarMediaTitle = toolbarMediaMessages.toolbarMediaTitle;
   return /*#__PURE__*/React.createElement(ToolbarButton, {
     buttonId: TOOLBAR_BUTTON.MEDIA,
-    onClick: onClickMediaButton(mediaState),
+    onClick: onClickMediaButton(showMediaPicker),
     disabled: isDisabled,
     title: intl.formatMessage(toolbarMediaTitle),
     spacing: isReducedSpacing ? 'none' : 'default',

package/dist/esm/ui/hooks/useMediaProvider.js

@@ -1,10 +1,18 @@
 import { useMemo } from 'react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export var useMediaProvider = function useMediaProvider(pluginInjectionApi) {
-  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['media']),
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['media'], {
+      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+    }),
     mediaState = _useSharedPluginState.mediaState;
+  var mediaProviderSelector = useSharedPluginStateSelector(pluginInjectionApi, 'media.mediaProvider', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var mediaProvider = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? mediaProviderSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider;
   var provider = useMemo(function () {
-    return mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider;
-  }, [mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider]);
+    return mediaProvider;
+  }, [mediaProvider]);
   return provider;
 };

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

@@ -18,9 +18,8 @@ var getSelectedMediaContainerNodeAttrs = function getSelectedMediaContainerNodeA
   }
   return null;
 };
-export var getSelectedNearestMediaContainerNodeAttrs = function getSelectedNearestMediaContainerNodeAttrs(mediaPluginState) {
-  var _mediaPluginState$sel2;
-  var selectedNode = (_mediaPluginState$sel2 = mediaPluginState.selectedMediaContainerNode) === null || _mediaPluginState$sel2 === void 0 ? void 0 : _mediaPluginState$sel2.call(mediaPluginState);
+export var getSelectedNearestMediaContainerNodeAttrsFunction = function getSelectedNearestMediaContainerNodeAttrsFunction(selectedMediaContainerNode) {
+  var selectedNode = selectedMediaContainerNode === null || selectedMediaContainerNode === void 0 ? void 0 : selectedMediaContainerNode();
   if (selectedNode) {
     switch (selectedNode.type.name) {
       case 'mediaSingle':
@@ -34,6 +33,9 @@ export var getSelectedNearestMediaContainerNodeAttrs = function getSelectedNeare
   }
   return null;
 };
+export var getSelectedNearestMediaContainerNodeAttrs = function getSelectedNearestMediaContainerNodeAttrs(mediaPluginState) {
+  return getSelectedNearestMediaContainerNodeAttrsFunction(mediaPluginState.selectedMediaContainerNode);
+};
 export var downloadMedia = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(mediaPluginState, isViewMode) {
     var selectedNodeAttrs, id, _selectedNodeAttrs$co, collection, mediaClient, fileState, fileName;

package/dist/types/nodeviews/mediaInline.d.ts

@@ -8,8 +8,8 @@ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import type { FileIdentifier } from '@atlaskit/media-client';
+import type { MediaClientConfig } from '@atlaskit/media-core/auth';
 import type { MediaNextEditorPluginType } from '../mediaPluginType';
-import type { MediaPluginState } from '../pm-plugins/types';
 import type { getPosHandler, getPosHandler as ProsemirrorGetPosHandler } from '../types';
 export interface MediaInlineProps {
     mediaProvider: Promise<MediaProvider>;
@@ -20,7 +20,12 @@ export interface MediaInlineProps {
     getPos: ProsemirrorGetPosHandler;
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
     contextIdentifierProvider?: Promise<ContextIdentifierProvider>;
-    mediaPluginState: MediaPluginState;
+    handleMediaNodeMount: (node: PMNode, getPos: ProsemirrorGetPosHandler) => void;
+    handleMediaNodeUnmount: (node: PMNode) => void;
+    allowInlineImages?: boolean;
+    addPendingTask: (promise: Promise<any>) => void;
+    selectedMediaContainerNode: () => PMNode | undefined;
+    mediaClientConfig: MediaClientConfig;
     editorViewMode?: boolean;
 }
 export declare const handleNewNode: (props: MediaInlineProps) => void;

package/dist/types/nodeviews/mediaSingleNext.d.ts

@@ -3,11 +3,9 @@ import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { ContextIdentifierProvider, MediaProvider } from '@atlaskit/editor-common/provider-factory';
 import type { EditorAppearance, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import type { InlineCommentPluginState } from '@atlaskit/editor-plugin-annotation';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { MediaNextEditorPluginType } from '../mediaPluginType';
-import type { MediaPluginState } from '../pm-plugins/types';
 import type { ForwardRef, MediaOptions } from '../types';
 type MediaSingleNodeNextProps = {
     view: EditorView;
@@ -21,8 +19,9 @@ type MediaSingleNodeNextProps = {
     mediaProvider?: Promise<MediaProvider>;
     contextIdentifierProvider?: Promise<ContextIdentifierProvider>;
     fullWidthMode?: boolean;
-    mediaPluginState: MediaPluginState | undefined;
-    annotationPluginState: InlineCommentPluginState | undefined;
+    addPendingTask?: (promise: Promise<any>) => void;
+    isDrafting?: boolean;
+    targetNodeId?: string;
     dispatchAnalyticsEvent: DispatchAnalyticsEvent;
     isCopyPasteEnabled?: boolean;
     forwardRef: ForwardRef;

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

@@ -2,11 +2,9 @@ import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { ContextIdentifierProvider, MediaProvider, ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { EditorAppearance, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import type { InlineCommentPluginState } from '@atlaskit/editor-plugin-annotation';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { MediaNextEditorPluginType } from '../mediaPluginType';
-import type { MediaPluginState } from '../pm-plugins/types';
 import type { ForwardRef, MediaOptions, getPosHandler as ProsemirrorGetPosHandler } from '../types';
 export interface MediaSingleNodeProps {
     view: EditorView;
@@ -20,8 +18,9 @@ export interface MediaSingleNodeProps {
     mediaProvider?: Promise<MediaProvider>;
     contextIdentifierProvider?: Promise<ContextIdentifierProvider>;
     fullWidthMode?: boolean;
-    mediaPluginState: MediaPluginState;
-    annotationPluginState: InlineCommentPluginState;
+    addPendingTask?: (promise: Promise<any>) => void;
+    isDrafting?: boolean;
+    targetNodeId?: string;
     dispatchAnalyticsEvent: DispatchAnalyticsEvent;
     isCopyPasteEnabled?: boolean;
     forwardRef: ForwardRef;

package/dist/types/pm-plugins/utils/media-files.d.ts

@@ -1,9 +1,10 @@
-import type { EditorAnalyticsAPI, InputMethodInsertMedia } from '@atlaskit/editor-common/analytics';
-import { type InsertMediaVia } from '@atlaskit/editor-common/analytics';
+import type { EditorAnalyticsAPI, InputMethodInsertMedia, InsertEventPayload } from '@atlaskit/editor-common/analytics';
+import { ACTION_SUBJECT_ID, type InsertMediaVia } from '@atlaskit/editor-common/analytics';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { MediaState } from '../../types';
 export declare const canInsertMediaInline: (state: EditorState) => boolean;
+export declare const getFailToInsertAnalytics: (mediaState: MediaState, actionSubjectId: ACTION_SUBJECT_ID.MEDIA_INLINE | ACTION_SUBJECT_ID.MEDIA_GROUP | ACTION_SUBJECT_ID.MEDIA_SINGLE, inputMethod?: InputMethodInsertMedia, insertMediaVia?: InsertMediaVia, reason?: string) => InsertEventPayload;
 /**
  * Create a new media inline to insert the new media.
  * @param view Editor view

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

@@ -57,6 +57,23 @@ export interface MediaPluginOptions {
     forceHandlePositioning?: HandlePositioning;
     mediaShallowCopyScope?: MediaCopyScope;
     allowPixelResizing?: boolean;
+    /**
+     * Enabling this will prevent this plugin from automatically trying to upload external images to the Media service.
+     * This can be used in conjunction with the `isOnlyExternalLinks` config for `media-insert-plugin` to limit images
+     * to external URLs in the UI as well.
+     *
+     * @example
+     * ```typescript
+     *  createDefaultPreset({ featureFlags: {}, paste: {} })
+     *      .add(listPlugin)
+     *      .add(gridPlugin)
+     *      .add([mediaPlugin, { provider, allowMediaSingle: true, isExternalMediaUploadDisabled: true }])
+     *      .add(insertBlockPlugin)
+     *      .add(contentInsertionPlugin)
+     *      .add([mediaInsertPlugin, { isOnlyExternalLinks: true }])
+     * ```
+     */
+    isExternalMediaUploadDisabled?: boolean;
 }
 /**
  * @private

package/dist/types/ui/MediaViewer/MediaViewerContainer.d.ts

@@ -5,14 +5,15 @@
 import React from 'react';
 import { jsx } from '@emotion/react';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { type MediaPluginState } from '../../types';
+import type { MediaClientConfig } from '@atlaskit/media-core/auth';
 type MediaViewerContainerProps = {
     mediaNode: PMNode;
-    mediaPluginState: MediaPluginState;
+    selectedMediaContainerNode: () => PMNode | undefined;
+    mediaClientConfig: MediaClientConfig;
     isEditorViewMode?: boolean;
     isSelected?: boolean;
     isInline?: boolean;
     children?: React.ReactNode;
 };
-export declare const MediaViewerContainer: ({ mediaNode, mediaPluginState, isEditorViewMode, isSelected, isInline, children, }: MediaViewerContainerProps) => jsx.JSX.Element;
+export declare const MediaViewerContainer: ({ mediaNode, selectedMediaContainerNode, mediaClientConfig, isEditorViewMode, isSelected, isInline, children, }: MediaViewerContainerProps) => jsx.JSX.Element;
 export {};

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

@@ -7,6 +7,7 @@ import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-p
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { MediaPluginState } from '../../pm-plugins/types';
 export declare const isExternalMedia: (attrs: MediaADFAttrs) => attrs is ExternalMediaAttributes;
+export declare const getSelectedNearestMediaContainerNodeAttrsFunction: (selectedMediaContainerNode: () => ProseMirrorNode | undefined) => MediaADFAttrs | null;
 export declare const getSelectedNearestMediaContainerNodeAttrs: (mediaPluginState: MediaPluginState) => MediaADFAttrs | null;
 export declare const downloadMedia: (mediaPluginState: MediaPluginState, isViewMode?: boolean) => Promise<boolean>;
 export declare const removeMediaGroupNode: (state: EditorState) => import("prosemirror-state").Transaction;

package/dist/types-ts4.5/nodeviews/mediaInline.d.ts

@@ -8,8 +8,8 @@ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import type { FileIdentifier } from '@atlaskit/media-client';
+import type { MediaClientConfig } from '@atlaskit/media-core/auth';
 import type { MediaNextEditorPluginType } from '../mediaPluginType';
-import type { MediaPluginState } from '../pm-plugins/types';
 import type { getPosHandler, getPosHandler as ProsemirrorGetPosHandler } from '../types';
 export interface MediaInlineProps {
     mediaProvider: Promise<MediaProvider>;
@@ -20,7 +20,12 @@ export interface MediaInlineProps {
     getPos: ProsemirrorGetPosHandler;
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
     contextIdentifierProvider?: Promise<ContextIdentifierProvider>;
-    mediaPluginState: MediaPluginState;
+    handleMediaNodeMount: (node: PMNode, getPos: ProsemirrorGetPosHandler) => void;
+    handleMediaNodeUnmount: (node: PMNode) => void;
+    allowInlineImages?: boolean;
+    addPendingTask: (promise: Promise<any>) => void;
+    selectedMediaContainerNode: () => PMNode | undefined;
+    mediaClientConfig: MediaClientConfig;
     editorViewMode?: boolean;
 }
 export declare const handleNewNode: (props: MediaInlineProps) => void;

package/dist/types-ts4.5/nodeviews/mediaSingleNext.d.ts

@@ -3,11 +3,9 @@ import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { ContextIdentifierProvider, MediaProvider } from '@atlaskit/editor-common/provider-factory';
 import type { EditorAppearance, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import type { InlineCommentPluginState } from '@atlaskit/editor-plugin-annotation';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { MediaNextEditorPluginType } from '../mediaPluginType';
-import type { MediaPluginState } from '../pm-plugins/types';
 import type { ForwardRef, MediaOptions } from '../types';
 type MediaSingleNodeNextProps = {
     view: EditorView;
@@ -21,8 +19,9 @@ type MediaSingleNodeNextProps = {
     mediaProvider?: Promise<MediaProvider>;
     contextIdentifierProvider?: Promise<ContextIdentifierProvider>;
     fullWidthMode?: boolean;
-    mediaPluginState: MediaPluginState | undefined;
-    annotationPluginState: InlineCommentPluginState | undefined;
+    addPendingTask?: (promise: Promise<any>) => void;
+    isDrafting?: boolean;
+    targetNodeId?: string;
     dispatchAnalyticsEvent: DispatchAnalyticsEvent;
     isCopyPasteEnabled?: boolean;
     forwardRef: ForwardRef;

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

@@ -2,11 +2,9 @@ import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { ContextIdentifierProvider, MediaProvider, ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { EditorAppearance, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import type { InlineCommentPluginState } from '@atlaskit/editor-plugin-annotation';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { MediaNextEditorPluginType } from '../mediaPluginType';
-import type { MediaPluginState } from '../pm-plugins/types';
 import type { ForwardRef, MediaOptions, getPosHandler as ProsemirrorGetPosHandler } from '../types';
 export interface MediaSingleNodeProps {
     view: EditorView;
@@ -20,8 +18,9 @@ export interface MediaSingleNodeProps {
     mediaProvider?: Promise<MediaProvider>;
     contextIdentifierProvider?: Promise<ContextIdentifierProvider>;
     fullWidthMode?: boolean;
-    mediaPluginState: MediaPluginState;
-    annotationPluginState: InlineCommentPluginState;
+    addPendingTask?: (promise: Promise<any>) => void;
+    isDrafting?: boolean;
+    targetNodeId?: string;
     dispatchAnalyticsEvent: DispatchAnalyticsEvent;
     isCopyPasteEnabled?: boolean;
     forwardRef: ForwardRef;

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

@@ -1,9 +1,10 @@
-import type { EditorAnalyticsAPI, InputMethodInsertMedia } from '@atlaskit/editor-common/analytics';
-import { type InsertMediaVia } from '@atlaskit/editor-common/analytics';
+import type { EditorAnalyticsAPI, InputMethodInsertMedia, InsertEventPayload } from '@atlaskit/editor-common/analytics';
+import { ACTION_SUBJECT_ID, type InsertMediaVia } from '@atlaskit/editor-common/analytics';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { MediaState } from '../../types';
 export declare const canInsertMediaInline: (state: EditorState) => boolean;
+export declare const getFailToInsertAnalytics: (mediaState: MediaState, actionSubjectId: ACTION_SUBJECT_ID.MEDIA_INLINE | ACTION_SUBJECT_ID.MEDIA_GROUP | ACTION_SUBJECT_ID.MEDIA_SINGLE, inputMethod?: InputMethodInsertMedia, insertMediaVia?: InsertMediaVia, reason?: string) => InsertEventPayload;
 /**
  * Create a new media inline to insert the new media.
  * @param view Editor view

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

@@ -57,6 +57,23 @@ export interface MediaPluginOptions {
     forceHandlePositioning?: HandlePositioning;
     mediaShallowCopyScope?: MediaCopyScope;
     allowPixelResizing?: boolean;
+    /**
+     * Enabling this will prevent this plugin from automatically trying to upload external images to the Media service.
+     * This can be used in conjunction with the `isOnlyExternalLinks` config for `media-insert-plugin` to limit images
+     * to external URLs in the UI as well.
+     *
+     * @example
+     * ```typescript
+     *  createDefaultPreset({ featureFlags: {}, paste: {} })
+     *      .add(listPlugin)
+     *      .add(gridPlugin)
+     *      .add([mediaPlugin, { provider, allowMediaSingle: true, isExternalMediaUploadDisabled: true }])
+     *      .add(insertBlockPlugin)
+     *      .add(contentInsertionPlugin)
+     *      .add([mediaInsertPlugin, { isOnlyExternalLinks: true }])
+     * ```
+     */
+    isExternalMediaUploadDisabled?: boolean;
 }
 /**
  * @private

package/dist/types-ts4.5/ui/MediaViewer/MediaViewerContainer.d.ts

@@ -5,14 +5,15 @@
 import React from 'react';
 import { jsx } from '@emotion/react';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { type MediaPluginState } from '../../types';
+import type { MediaClientConfig } from '@atlaskit/media-core/auth';
 type MediaViewerContainerProps = {
     mediaNode: PMNode;
-    mediaPluginState: MediaPluginState;
+    selectedMediaContainerNode: () => PMNode | undefined;
+    mediaClientConfig: MediaClientConfig;
     isEditorViewMode?: boolean;
     isSelected?: boolean;
     isInline?: boolean;
     children?: React.ReactNode;
 };
-export declare const MediaViewerContainer: ({ mediaNode, mediaPluginState, isEditorViewMode, isSelected, isInline, children, }: MediaViewerContainerProps) => jsx.JSX.Element;
+export declare const MediaViewerContainer: ({ mediaNode, selectedMediaContainerNode, mediaClientConfig, isEditorViewMode, isSelected, isInline, children, }: MediaViewerContainerProps) => jsx.JSX.Element;
 export {};

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

@@ -7,6 +7,7 @@ import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-p
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { MediaPluginState } from '../../pm-plugins/types';
 export declare const isExternalMedia: (attrs: MediaADFAttrs) => attrs is ExternalMediaAttributes;
+export declare const getSelectedNearestMediaContainerNodeAttrsFunction: (selectedMediaContainerNode: () => ProseMirrorNode | undefined) => MediaADFAttrs | null;
 export declare const getSelectedNearestMediaContainerNodeAttrs: (mediaPluginState: MediaPluginState) => MediaADFAttrs | null;
 export declare const downloadMedia: (mediaPluginState: MediaPluginState, isViewMode?: boolean) => Promise<boolean>;
 export declare const removeMediaGroupNode: (state: EditorState) => import("prosemirror-state").Transaction;