@atlaskit/editor-plugin-media 2.7.0 → 2.7.2

package/dist/es2019/nodeviews/mediaInline.js

@@ -10,10 +10,12 @@ import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { MediaInlineImageCard } from '@atlaskit/editor-common/media-inline';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { MediaInlineCard } from '@atlaskit/media-card';
 import { getMediaClient } from '@atlaskit/media-client-react';
 import { MediaInlineCardLoadingView } from '@atlaskit/media-ui';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { isImage } from '../pm-plugins/utils/is-type';
 import { MediaViewerContainer } from '../ui/MediaViewer/MediaViewerContainer';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
@@ -37,7 +39,7 @@ const createMediaNodeUpdater = props => {
 const updateMediaNodeAttributes = async (props, mediaNodeUpdater) => {
   const {
     addPendingTask
-  } = props.mediaPluginState;
+  } = props;
   const node = props.node;
   if (!node) {
     return;
@@ -64,10 +66,10 @@ const updateMediaNodeAttributes = async (props, mediaNodeUpdater) => {
 export const handleNewNode = props => {
   const {
     node,
-    mediaPluginState,
+    handleMediaNodeMount,
     getPos
   } = props;
-  mediaPluginState.handleMediaNodeMount(node, () => getPos());
+  handleMediaNodeMount(node, () => getPos());
 };
 export const MediaInline = props => {
   var _props$node, _props$node$marks;
@@ -81,9 +83,9 @@ export const MediaInline = props => {
     updateViewMediaClientConfig(props);
     return () => {
       const {
-        mediaPluginState
+        handleMediaNodeUnmount
       } = props;
-      mediaPluginState.handleMediaNodeUnmount(props.node);
+      handleMediaNodeUnmount(props.node);
     };
   }, [props]);
   const updateViewMediaClientConfig = async props => {
@@ -124,7 +126,7 @@ export const MediaInline = props => {
   }
   const {
     allowInlineImages
-  } = props.mediaPluginState;
+  } = props;
   const borderMark = (_props$node = props.node) === null || _props$node === void 0 ? void 0 : (_props$node$marks = _props$node.marks) === null || _props$node$marks === void 0 ? void 0 : _props$node$marks.find(mark => mark.type.name === 'border');
   if (allowInlineImages && isImage(type)) {
     return jsx(MediaInlineImageCard, {
@@ -143,7 +145,8 @@ export const MediaInline = props => {
   }
   return jsx(MediaViewerContainer, {
     mediaNode: props.node,
-    mediaPluginState: props.mediaPluginState,
+    selectedMediaContainerNode: props.selectedMediaContainerNode,
+    mediaClientConfig: props.mediaClientConfig,
     isEditorViewMode: props.editorViewMode,
     isSelected: props.isSelected,
     isInline: fg('platform_editor_render_media_viewer_as_inline')
@@ -165,21 +168,60 @@ const MediaInlineSharedState = ({
   const {
     editorViewModeState,
     mediaState
-  } = useSharedPluginState(api, ['editorViewMode', 'media']);
-  const newMediaProvider = useMemo(() => mediaState !== null && mediaState !== void 0 && mediaState.mediaProvider ? Promise.resolve(mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider) : undefined, [mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider]);
-  if (!mediaState || !newMediaProvider) {
+  } = useSharedPluginState(api, ['editorViewMode', 'media'], {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+  });
+  const viewModeSelector = useSharedPluginStateSelector(api, 'editorViewMode.mode', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const mediaProviderSelector = useSharedPluginStateSelector(api, 'media.mediaProvider', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const handleMediaNodeMountSelector = useSharedPluginStateSelector(api, 'media.handleMediaNodeMount', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const handleMediaNodeUnmountSelector = useSharedPluginStateSelector(api, 'media.handleMediaNodeUnmount', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const allowInlineImagesSelector = useSharedPluginStateSelector(api, 'media.allowInlineImages', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const addPendingTaskSelector = useSharedPluginStateSelector(api, 'media.addPendingTask', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const selectedMediaContainerNodeSelector = useSharedPluginStateSelector(api, 'media.selectedMediaContainerNode', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const mediaClientConfigSelector = useSharedPluginStateSelector(api, 'media.mediaClientConfig', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const viewMode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? viewModeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
+  const mediaProvider = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? mediaProviderSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider;
+  const handleMediaNodeMount = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? handleMediaNodeMountSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.handleMediaNodeMount;
+  const handleMediaNodeUnmount = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? handleMediaNodeUnmountSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.handleMediaNodeUnmount;
+  const allowInlineImages = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? allowInlineImagesSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.allowInlineImages;
+  const addPendingTask = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? addPendingTaskSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.addPendingTask;
+  const selectedMediaContainerNode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectedMediaContainerNodeSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.selectedMediaContainerNode;
+  const mediaClientConfig = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? mediaClientConfigSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaClientConfig;
+  const newMediaProvider = useMemo(() => mediaProvider ? Promise.resolve(mediaProvider) : undefined, [mediaProvider]);
+  if (!handleMediaNodeMount || !handleMediaNodeUnmount || !addPendingTask || !selectedMediaContainerNode || !mediaClientConfig || !newMediaProvider) {
     return null;
   }
   return jsx(MediaInline, {
     identifier: identifier,
     mediaProvider: newMediaProvider,
-    mediaPluginState: mediaState,
+    handleMediaNodeMount: handleMediaNodeMount,
+    handleMediaNodeUnmount: handleMediaNodeUnmount,
+    allowInlineImages: allowInlineImages,
+    addPendingTask: addPendingTask,
+    selectedMediaContainerNode: selectedMediaContainerNode,
+    mediaClientConfig: mediaClientConfig,
     node: node,
     isSelected: isSelected,
     view: view,
     getPos: getPos,
     contextIdentifierProvider: contextIdentifierProvider,
-    editorViewMode: (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view'
+    editorViewMode: viewMode === 'view'
   });
 };
 export class MediaInlineNodeView extends SelectionBasedNodeView {

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

@@ -4,7 +4,9 @@ import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { getAttrsFromUrl } from '@atlaskit/media-client';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { updateCurrentMediaNodeAttrs } from '../../pm-plugins/commands/helpers';
 import { isMediaBlobUrlFromAttrs } from '../../pm-plugins/utils/media-common';
 // Ignored via go/ees005
@@ -17,10 +19,16 @@ const MediaNodeWithProviders = ({
   const {
     widthState,
     mediaState
-  } = useSharedPluginState(pluginInjectionApi, ['width', 'media']);
+  } = useSharedPluginState(pluginInjectionApi, ['width', 'media'], {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+  });
+  const mediaProviderSelector = useSharedPluginStateSelector(pluginInjectionApi, 'media.mediaProvider', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const mediaProvider = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? mediaProviderSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider;
   return innerComponent({
-    width: widthState,
-    mediaProvider: mediaState !== null && mediaState !== void 0 && mediaState.mediaProvider ? Promise.resolve(mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider) : undefined
+    width: editorExperiment('platform_editor_usesharedpluginstateselector', true) ? widthState : undefined,
+    mediaProvider: mediaProvider ? Promise.resolve(mediaProvider) : undefined
   });
 };
 function isMediaDecorationSpec(decoration) {

package/dist/es2019/nodeviews/mediaSingle.js

@@ -23,6 +23,7 @@ import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/u
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { getAttrsFromUrl } from '@atlaskit/media-client';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { insertAndSelectCaptionFromMediaSinglePos } from '../pm-plugins/commands/captions';
 import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
 import { isMediaBlobUrlFromAttrs } from '../pm-plugins/utils/media-common';
@@ -85,7 +86,10 @@ export default class MediaSingleNode extends Component {
       this.createOrUpdateMediaNodeUpdater(props);
       const {
         addPendingTask
-      } = this.props.mediaPluginState;
+      } = this.props;
+      if (!addPendingTask) {
+        return;
+      }
 
       // we want the first child of MediaSingle (type "media")
       const node = this.props.node.firstChild;
@@ -267,7 +271,8 @@ export default class MediaSingleNode extends Component {
       dispatchAnalyticsEvent,
       editorViewMode,
       editorDisabled,
-      annotationPluginState,
+      isDrafting,
+      targetNodeId,
       editorAppearance
     } = this.props;
     const {
@@ -376,7 +381,7 @@ export default class MediaSingleNode extends Component {
     const badgeOffsetRight = isBadgePosOffsetRight();
     let shouldShowPlaceholder = mediaOptions.allowCaptions && node.childCount !== 2 && isSelected && state.selection instanceof NodeSelection;
     shouldShowPlaceholder = !editorDisabled && shouldShowPlaceholder;
-    const isCurrentNodeDrafting = (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.isDrafting) && (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.targetNodeId) === (node === null || node === void 0 ? void 0 : (_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.attrs.id);
+    const isCurrentNodeDrafting = Boolean(isDrafting && targetNodeId === (node === null || node === void 0 ? void 0 : (_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.attrs.id));
     const pos = getPos();
     const isInsideTable = pos !== undefined && findParentNodeOfTypeClosestToPos(state.doc.resolve(pos), [state.schema.nodes.table]);
     const currentMediaElement = () => {
@@ -479,14 +484,48 @@ const MediaSingleNodeWrapper = ({
     annotationState,
     editorDisabledState,
     editorViewModeState
-  } = useSharedPluginState(pluginInjectionApi, ['width', 'media', 'annotation', 'editorDisabled', 'editorViewMode']);
+  } = useSharedPluginState(pluginInjectionApi, ['width', 'media', 'annotation', 'editorDisabled', 'editorViewMode'], {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+  });
+  const mediaProviderSelector = useSharedPluginStateSelector(pluginInjectionApi, 'media.mediaProvider', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const addPendingTaskSelector = useSharedPluginStateSelector(pluginInjectionApi, 'media.addPendingTask', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const isDraftingSelector = useSharedPluginStateSelector(pluginInjectionApi, 'annotation.isDrafting', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const targetNodeIdSelector = useSharedPluginStateSelector(pluginInjectionApi, 'annotation.targetNodeId', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const widthSelector = useSharedPluginStateSelector(pluginInjectionApi, 'width.width', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const lineLengthSelector = useSharedPluginStateSelector(pluginInjectionApi, 'width.lineLength', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const editorDisabledSelector = useSharedPluginStateSelector(pluginInjectionApi, 'editorDisabled.editorDisabled', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const viewModeSelector = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const mediaProviderState = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? mediaProviderSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider;
+  const addPendingTask = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? addPendingTaskSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.addPendingTask;
+  const isDrafting = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isDraftingSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.isDrafting;
+  const targetNodeId = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? targetNodeIdSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.targetNodeId;
+  const width = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? widthSelector : widthState === null || widthState === void 0 ? void 0 : widthState.width;
+  const lineLength = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? lineLengthSelector : widthState === null || widthState === void 0 ? void 0 : widthState.lineLength;
+  const editorDisabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? editorDisabledSelector : editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled;
+  const viewMode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? viewModeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
   const hasHadInteraction = useSharedPluginStateSelector(pluginInjectionApi, 'interaction.hasHadInteraction');
-  const mediaProvider = useMemo(() => mediaState !== null && mediaState !== void 0 && mediaState.mediaProvider ? Promise.resolve(mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider) : undefined, [mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider]);
+  const mediaProvider = useMemo(() => mediaProviderState ? Promise.resolve(mediaProviderState) : undefined, [mediaProviderState]);
   const isSelectedAndInteracted = useCallback(() => Boolean(selected() && hasHadInteraction !== false), [hasHadInteraction, selected]);
   if (fg('platform_editor_react18_phase2__media_single') || fg('platform_editor_react18_phase2__media_single_jira')) {
     return jsx(MediaSingleNodeNext, {
-      width: (widthState === null || widthState === void 0 ? void 0 : widthState.width) || 0,
-      lineLength: (widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || 0,
+      width: width || 0,
+      lineLength: lineLength || 0,
       node: node,
       getPos: getPos,
       mediaProvider: mediaProvider,
@@ -496,25 +535,20 @@ const MediaSingleNodeWrapper = ({
       fullWidthMode: fullWidthMode,
       selected: fg('platform_editor_no_selection_until_interaction') ? isSelectedAndInteracted : selected,
       eventDispatcher: eventDispatcher,
-      mediaPluginState: mediaState !== null && mediaState !== void 0 ? mediaState : undefined,
-      annotationPluginState: annotationState !== null && annotationState !== void 0 ? annotationState : undefined,
+      addPendingTask: addPendingTask,
+      isDrafting: isDrafting,
+      targetNodeId: targetNodeId,
       dispatchAnalyticsEvent: dispatchAnalyticsEvent,
       forwardRef: forwardRef,
       pluginInjectionApi: pluginInjectionApi,
-      editorDisabled: editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled,
-      editorViewMode: (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view',
+      editorDisabled: editorDisabled,
+      editorViewMode: viewMode === 'view',
       editorAppearance: editorAppearance
     });
   }
-  return jsx(MediaSingleNode
-  // Ignored via go/ees005
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  , {
-    width: widthState.width
-    // Ignored via go/ees005
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    ,
-    lineLength: widthState.lineLength,
+  return jsx(MediaSingleNode, {
+    width: width,
+    lineLength: lineLength,
     node: node,
     getPos: getPos,
     mediaProvider: mediaProvider,
@@ -524,13 +558,14 @@ const MediaSingleNodeWrapper = ({
     fullWidthMode: fullWidthMode,
     selected: fg('platform_editor_no_selection_until_interaction') ? isSelectedAndInteracted : selected,
     eventDispatcher: eventDispatcher,
-    mediaPluginState: mediaState !== null && mediaState !== void 0 ? mediaState : undefined,
-    annotationPluginState: annotationState !== null && annotationState !== void 0 ? annotationState : undefined,
+    addPendingTask: addPendingTask,
+    isDrafting: isDrafting,
+    targetNodeId: targetNodeId,
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
     forwardRef: forwardRef,
     pluginInjectionApi: pluginInjectionApi,
-    editorDisabled: editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled,
-    editorViewMode: (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view',
+    editorDisabled: editorDisabled,
+    editorViewMode: viewMode === 'view',
     editorAppearance: editorAppearance
   });
 };

package/dist/es2019/nodeviews/mediaSingleNext.js

@@ -261,12 +261,13 @@ export const MediaSingleNodeNext = mediaSingleNodeNextProps => {
     dispatchAnalyticsEvent,
     editorViewMode,
     editorDisabled,
-    annotationPluginState,
+    isDrafting,
+    targetNodeId,
     editorAppearance,
     mediaProvider: mediaProviderPromise,
     forwardRef,
     contextIdentifierProvider: contextIdentifierProviderPromise,
-    mediaPluginState
+    addPendingTask
   } = mediaSingleNodeNextProps;
   const [mediaProvider, setMediaProvider] = React.useState(null);
   const [_contextIdentifierProvider, setContextIdentifierProvider] = React.useState(null);
@@ -286,7 +287,7 @@ export const MediaSingleNodeNext = mediaSingleNodeNextProps => {
     mediaNodeUpdater,
     getPos,
     mediaNode,
-    addPendingTask: (mediaPluginState === null || mediaPluginState === void 0 ? void 0 : mediaPluginState.addPendingTask) || noop
+    addPendingTask: addPendingTask || noop
   });
   React.useLayoutEffect(() => {
     mountedRef.current = true;
@@ -398,7 +399,7 @@ export const MediaSingleNodeNext = mediaSingleNodeNextProps => {
   }, [mediaSingleWidthAttribute, widthType, width, layout, contentWidthForLegacyExperience, containerWidth]);
   const currentMaxWidth = isSelected ? pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$m = pluginInjectionApi.media) === null || _pluginInjectionApi$m === void 0 ? void 0 : (_pluginInjectionApi$m2 = _pluginInjectionApi$m.sharedState.currentState()) === null || _pluginInjectionApi$m2 === void 0 ? void 0 : _pluginInjectionApi$m2.currentMaxWidth : undefined;
   const contentWidth = currentMaxWidth || lineLength;
-  const isCurrentNodeDrafting = Boolean((annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.isDrafting) && (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.targetNodeId) === (mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$firstChild = mediaNode.firstChild) === null || _mediaNode$firstChild === void 0 ? void 0 : _mediaNode$firstChild.attrs.id));
+  const isCurrentNodeDrafting = Boolean(isDrafting && targetNodeId === (mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$firstChild = mediaNode.firstChild) === null || _mediaNode$firstChild === void 0 ? void 0 : _mediaNode$firstChild.attrs.id));
   const mediaSingleWrapperRef = /*#__PURE__*/React.createRef();
   const captionPlaceHolderRef = /*#__PURE__*/React.createRef();
   const onMediaSingleClicked = React.useCallback(event => {

package/dist/es2019/pm-plugins/utils/media-files.js

@@ -3,7 +3,9 @@ import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-comm
 import { atTheBeginningOfBlock, atTheEndOfBlock, atTheEndOfDoc, endPositionOfParent, startPositionOfParent } from '@atlaskit/editor-common/selection';
 import { findFarthestParentNode, insideTableCell, isInLayoutColumn, isInListItem, isSupportedInParent, setNodeSelection, setTextSelection } from '@atlaskit/editor-common/utils';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import { ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
 import { canInsert, hasParentNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { isImage } from './is-type';
 import { copyOptionalAttrsFromMediaState, isInsidePotentialEmptyParagraph, isSelectionNonMediaBlockNode, posOfMediaGroupNearby, posOfParentMediaGroup, posOfPrecedingMediaGroup } from './media-common';
 import { isInSupportedInlineImageParent } from './media-inline';
@@ -46,7 +48,21 @@ const getInsertMediaInlineAnalytics = (mediaState, inputMethod, insertMediaVia)
     eventType: EVENT_TYPE.TRACK
   };
 };
-
+export const getFailToInsertAnalytics = (mediaState, actionSubjectId, inputMethod, insertMediaVia, reason) => {
+  const media = mediaState.fileMimeType || 'unknown';
+  return {
+    action: ACTION.FAILED_TO_INSERT,
+    actionSubject: ACTION_SUBJECT.DOCUMENT,
+    actionSubjectId,
+    attributes: {
+      inputMethod,
+      fileExtension: media,
+      insertMediaVia,
+      reason
+    },
+    eventType: EVENT_TYPE.OPERATIONAL
+  };
+};
 /**
  * Check if current editor selections is a media group or not.
  * @param state Editor state
@@ -77,6 +93,27 @@ function shouldAppendParagraph(state, node) {
   return (insideTableCell(state) || isInListItem(state) || isInLayoutColumn(state) || atTheEndOfDoc(state) && (!posOfPrecedingMediaGroup(state) || isSelectionNonMediaBlockNode(state))) && !wasMediaNode;
 }
 
+/**
+ * Check if node of type has been inserted successfully
+ */
+const hasInsertedNodeOfType = (tr, nodeType) => {
+  var _tr$doc$nodeAt;
+  let insertPos = -1;
+  tr.steps.forEach(step => {
+    if (step instanceof ReplaceStep) {
+      step.slice.content.forEach(node => {
+        if (node.type.name === nodeType) {
+          insertPos = step.from;
+        }
+      });
+    }
+  });
+  if (insertPos === -1 || ((_tr$doc$nodeAt = tr.doc.nodeAt(insertPos)) === null || _tr$doc$nodeAt === void 0 ? void 0 : _tr$doc$nodeAt.type.name) !== nodeType) {
+    return false;
+  }
+  return true;
+};
+
 /**
  * Create a new media inline to insert the new media.
  * @param view Editor view
@@ -138,12 +175,33 @@ export const insertMediaInlineNode = editorAnalyticsAPI => (view, mediaState, co
 
   // Delete the selection if a selection is made
   const deleteRange = findDeleteRange(state);
-  if (!deleteRange) {
-    tr.insert(pos, content);
+  if (fg('platform_editor_track_media_fail_to_insert')) {
+    let payload;
+    try {
+      if (!deleteRange) {
+        tr.insert(pos, content);
+      } else {
+        tr.insert(pos, content).deleteRange(deleteRange.start, deleteRange.end);
+      }
+      if (hasInsertedNodeOfType(tr, 'mediaInline')) {
+        payload = getInsertMediaInlineAnalytics(mediaState, inputMethod, insertMediaVia);
+      } else {
+        payload = getFailToInsertAnalytics(mediaState, ACTION_SUBJECT_ID.MEDIA_INLINE, inputMethod, insertMediaVia);
+      }
+    } catch (error) {
+      payload = getFailToInsertAnalytics(mediaState, ACTION_SUBJECT_ID.MEDIA_INLINE, inputMethod, insertMediaVia,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      error.toString());
+    }
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
   } else {
-    tr.insert(pos, content).deleteRange(deleteRange.start, deleteRange.end);
+    if (!deleteRange) {
+      tr.insert(pos, content);
+    } else {
+      tr.insert(pos, content).deleteRange(deleteRange.start, deleteRange.end);
+    }
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(getInsertMediaInlineAnalytics(mediaState, inputMethod, insertMediaVia))(tr);
   }
-  editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(getInsertMediaInlineAnalytics(mediaState, inputMethod, insertMediaVia))(tr);
   dispatch(tr);
   return true;
 };

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

@@ -3,6 +3,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';
 const CommentBadgeWrapper = ({
   api,
   mediaNode,
@@ -15,7 +17,21 @@ const CommentBadgeWrapper = ({
   const [entered, setEntered] = useState(false);
   const {
     annotationState
-  } = useSharedPluginState(api, ['annotation']);
+  } = useSharedPluginState(api, ['annotation'], {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+  });
+  const selectedAnnotationsSelector = useSharedPluginStateSelector(api, 'annotation.selectedAnnotations', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const isInlineCommentViewClosedSelector = useSharedPluginStateSelector(api, 'annotation.isInlineCommentViewClosed', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const annotationsSelector = useSharedPluginStateSelector(api, 'annotation.annotations', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const selectedAnnotations = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectedAnnotationsSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.selectedAnnotations;
+  const isInlineCommentViewClosed = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isInlineCommentViewClosedSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.isInlineCommentViewClosed;
+  const annotations = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? annotationsSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.annotations;
   const {
     state: {
       schema: {
@@ -31,11 +47,11 @@ const CommentBadgeWrapper = ({
     dispatch
   } = view;
   const status = useMemo(() => {
-    if (!(annotationState !== null && annotationState !== void 0 && annotationState.selectedAnnotations) || !mediaNode) {
+    if (!selectedAnnotations || !mediaNode) {
       return 'default';
     }
-    return annotationState.selectedAnnotations.some(annotation => !!mediaNode.marks.find(mark => mark.attrs.id === annotation.id)) && !annotationState.isInlineCommentViewClosed ? 'active' : 'default';
-  }, [annotationState, mediaNode]);
+    return selectedAnnotations.some(annotation => !!mediaNode.marks.find(mark => mark.attrs.id === annotation.id)) && !isInlineCommentViewClosed ? 'active' : 'default';
+  }, [selectedAnnotations, isInlineCommentViewClosed, mediaNode]);
   const onClick = useCallback(() => {
     if (api.annotation && mediaNode) {
       const {
@@ -45,7 +61,7 @@ const CommentBadgeWrapper = ({
     }
   }, [api.annotation, dispatch, mediaNode, state]);
   const pos = getPos();
-  const hasNoComments = !Number.isFinite(pos) || !(annotationState !== null && annotationState !== void 0 && annotationState.annotations) || !mediaNode || mediaNode.type !== media || mediaNode.marks.every(maybeAnnotation => maybeAnnotation.type !== annotation || !(maybeAnnotation.attrs.id in annotationState.annotations) || annotationState.annotations[maybeAnnotation.attrs.id]);
+  const hasNoComments = !Number.isFinite(pos) || !annotations || !mediaNode || mediaNode.type !== media || mediaNode.marks.every(maybeAnnotation => maybeAnnotation.type !== annotation || !(maybeAnnotation.attrs.id in annotations) || annotations[maybeAnnotation.attrs.id]);
   if (!isDrafting && hasNoComments || !mediaNode) {
     return null;
   }
@@ -87,7 +103,21 @@ export const CommentBadgeNextWrapper = ({
   const [entered, setEntered] = useState(false);
   const {
     annotationState
-  } = useSharedPluginState(api, ['annotation']);
+  } = useSharedPluginState(api, ['annotation'], {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+  });
+  const selectedAnnotationsSelector = useSharedPluginStateSelector(api, 'annotation.selectedAnnotations', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const isInlineCommentViewClosedSelector = useSharedPluginStateSelector(api, 'annotation.isInlineCommentViewClosed', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const annotationsSelector = useSharedPluginStateSelector(api, 'annotation.annotations', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const selectedAnnotations = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectedAnnotationsSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.selectedAnnotations;
+  const isInlineCommentViewClosed = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isInlineCommentViewClosedSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.isInlineCommentViewClosed;
+  const annotations = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? annotationsSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.annotations;
   const {
     state: {
       schema: {
@@ -103,11 +133,11 @@ export const CommentBadgeNextWrapper = ({
     dispatch
   } = view;
   const status = useMemo(() => {
-    if (!(annotationState !== null && annotationState !== void 0 && annotationState.selectedAnnotations) || !mediaNode) {
+    if (!selectedAnnotations || !mediaNode) {
       return 'default';
     }
-    return annotationState.selectedAnnotations.some(annotation => !!mediaNode.marks.find(mark => mark.attrs.id === annotation.id)) && !annotationState.isInlineCommentViewClosed ? 'active' : 'default';
-  }, [annotationState, mediaNode]);
+    return selectedAnnotations.some(annotation => !!mediaNode.marks.find(mark => mark.attrs.id === annotation.id)) && !isInlineCommentViewClosed ? 'active' : 'default';
+  }, [selectedAnnotations, isInlineCommentViewClosed, mediaNode]);
   const onClick = useCallback(() => {
     if (api.annotation && mediaNode) {
       const {
@@ -117,7 +147,7 @@ export const CommentBadgeNextWrapper = ({
     }
   }, [api.annotation, dispatch, mediaNode, state]);
   const pos = getPos();
-  const hasNoComments = !Number.isFinite(pos) || !(annotationState !== null && annotationState !== void 0 && annotationState.annotations) || !mediaNode || mediaNode.type !== media || mediaNode.marks.every(maybeAnnotation => maybeAnnotation.type !== annotation || !(maybeAnnotation.attrs.id in annotationState.annotations) || annotationState.annotations[maybeAnnotation.attrs.id]);
+  const hasNoComments = !Number.isFinite(pos) || !annotations || !mediaNode || mediaNode.type !== media || mediaNode.marks.every(maybeAnnotation => maybeAnnotation.type !== annotation || !(maybeAnnotation.attrs.id in annotations) || annotations[maybeAnnotation.attrs.id]);
   if (!isDrafting && hasNoComments || !mediaNode) {
     return null;
   }

package/dist/es2019/ui/ImageBorder/styles.js

@@ -67,7 +67,6 @@ export const buttonStyle = selected => css`
 	display: block;
 `;
 
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const buttonWrapperStyle = css`
 	border: 1px solid transparent;
@@ -80,7 +79,7 @@ export const buttonWrapperStyle = css`
 	&:focus-within,
 	&:focus,
 	&:hover {
-		border-color: ${N50} !important;
+		border-color: ${`var(--ds-border, ${N50})`} !important;
 	}
 `;
 export const line = (size, selected) => css`

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

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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';
@@ -16,7 +18,17 @@ const MediaPicker = ({
   const {
     focusState,
     connectivityState
-  } = useSharedPluginState(api, ['focus', 'connectivity']);
+  } = useSharedPluginState(api, ['focus', 'connectivity'], {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+  });
+  const hasFocusSelector = useSharedPluginStateSelector(api, 'focus.hasFocus', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const connectivityModeSelector = useSharedPluginStateSelector(api, 'connectivity.mode', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const hasFocus = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? hasFocusSelector : focusState === null || focusState === void 0 ? void 0 : focusState.hasFocus;
+  const connectivityMode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? connectivityModeSelector : connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode;
   const featureFlags = mediaState.mediaOptions && mediaState.mediaOptions.featureFlags;
 
   // Ignored via go/ees005
@@ -31,7 +43,7 @@ const MediaPicker = ({
    * as stopImmediatePropagation could cause race condition issues
    */
   const container = editorParent;
-  const clipboard = focusState !== null && focusState !== void 0 && focusState.hasFocus ? /*#__PURE__*/React.createElement(ClipboardWrapper, {
+  const clipboard = hasFocus ? /*#__PURE__*/React.createElement(ClipboardWrapper, {
     mediaState: mediaState,
     featureFlags: featureFlags,
     container: container
@@ -40,7 +52,7 @@ const MediaPicker = ({
     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/es2019/ui/MediaViewer/MediaViewerContainer.js

@@ -8,7 +8,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';
 const interactiveStyles = css({
   cursor: 'pointer'
@@ -16,7 +16,8 @@ const interactiveStyles = css({
 const mediaViewerContainerTestID = 'media-viewer-container-test';
 export const MediaViewerContainer = ({
   mediaNode,
-  mediaPluginState,
+  selectedMediaContainerNode,
+  mediaClientConfig,
   isEditorViewMode = false,
   isSelected = true,
   isInline = false,
@@ -27,8 +28,7 @@ export const MediaViewerContainer = ({
   useEffect(() => {
     setShowMediaViewer(isSelected);
   }, [isSelected]);
-  const selectedNodeAttrs = getSelectedNearestMediaContainerNodeAttrs(mediaPluginState);
-  const mediaClientConfig = mediaPluginState.mediaClientConfig;
+  const selectedNodeAttrs = getSelectedNearestMediaContainerNodeAttrsFunction(selectedMediaContainerNode);
   const showMediaViewer = () => {
     setShowMediaViewer(true);
   };