@atlaskit/editor-plugin-media 1.7.0 → 1.8.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-media
 
+## 1.8.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.8.0
+
+### Minor Changes
+
+- [#77607](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/77607) [`78ab76808037`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/78ab76808037) - Fixed bug where save button state was not updated correctly for when media upload is in progress or finish uploading
+
+### Patch Changes
+
+- [#78508](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/78508) [`3459ec92fed3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3459ec92fed3) - [ux] When comment button in media floating toolbar is click, setInlineCommentDraftState from annotation plugin is evoked to apply draft docration and display inline comment create popup
+- Updated dependencies
+
 ## 1.7.0
 
 ### Minor Changes

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

@@ -87,6 +87,8 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
     (0, _defineProperty2.default)(this, "isResizing", false);
     (0, _defineProperty2.default)(this, "resizingWidth", 0);
     (0, _defineProperty2.default)(this, "allowInlineImages", false);
+    (0, _defineProperty2.default)(this, "uploadInProgressSubscriptions", []);
+    (0, _defineProperty2.default)(this, "uploadInProgressSubscriptionsNotified", false);
     // this is only a temporary variable, which gets cleared after the last inserted node has been selected
     (0, _defineProperty2.default)(this, "lastAddedMediaSingleFileIds", []);
     (0, _defineProperty2.default)(this, "destroyed", false);
@@ -231,6 +233,12 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
           allUploadsFinished: false
         });
       }
+      if (_this.uploadInProgressSubscriptions.length > 0 && !_this.uploadInProgressSubscriptionsNotified) {
+        _this.uploadInProgressSubscriptions.forEach(function (fn) {
+          return fn(true);
+        });
+        _this.uploadInProgressSubscriptionsNotified = true;
+      }
       switch ((0, _mediaInline2.getMediaNodeInsertionType)(state, _this.mediaOptions, mediaStateWithContext.fileMimeType)) {
         case 'inline':
           (0, _mediaFiles.insertMediaInlineNode)(editorAnalyticsAPI)(_this.view, mediaStateWithContext, collection, _this.allowInlineImages, _this.getInputMethod(pickerType));
@@ -273,6 +281,14 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
       if (!view.hasFocus()) {
         view.focus();
       }
+      _this.waitForPendingTasks().then(function () {
+        if (_this.uploadInProgressSubscriptions.length > 0 && _this.uploadInProgressSubscriptionsNotified) {
+          _this.uploadInProgressSubscriptions.forEach(function (fn) {
+            return fn(false);
+          });
+          _this.uploadInProgressSubscriptionsNotified = false;
+        }
+      });
       if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.autoselect-inserted-image_oumto')) {
         _this.selectLastAddedMediaNode();
       }
@@ -507,6 +523,18 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
         }
       });
     }
+  }, {
+    key: "subscribeToUploadInProgressState",
+    value: function subscribeToUploadInProgressState(fn) {
+      this.uploadInProgressSubscriptions.push(fn);
+    }
+  }, {
+    key: "unsubscribeFromUploadInProgressState",
+    value: function unsubscribeFromUploadInProgressState(fn) {
+      this.uploadInProgressSubscriptions = this.uploadInProgressSubscriptions.filter(function (subscribedFn) {
+        return subscribedFn !== fn;
+      });
+    }
   }, {
     key: "setIsResizing",
     value: function setIsResizing(isResizing) {

package/dist/cjs/toolbar/commands.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.updateMediaSingleWidth = exports.toggleBorderMark = exports.setBorderMark = exports.removeInlineCard = exports.getNodeType = exports.changeMediaSingleToMediaInline = exports.changeMediaInlineToMediaSingle = exports.changeMediaCardToInline = exports.changeInlineToMediaCard = exports.DEFAULT_BORDER_SIZE = exports.DEFAULT_BORDER_COLOR = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
@@ -14,7 +15,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _analytics2 = require("../utils/analytics");
 var _currentMediaNode = require("../utils/current-media-node");
 var _mediaCommon = require("../utils/media-common");
-var _mediaSingle = require("../utils/media-single");
+var _mediaSingle2 = require("../utils/media-single");
 var _utils2 = require("./utils");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -141,7 +142,7 @@ var changeMediaInlineToMediaSingle = exports.changeMediaInlineToMediaSingle = fu
       return false;
     }
     if (view) {
-      return (0, _mediaSingle.changeFromMediaInlineToMediaSingleNode)(view, selectedNode, widthPluginState, editorAnalyticsAPI);
+      return (0, _mediaSingle2.changeFromMediaInlineToMediaSingleNode)(view, selectedNode, widthPluginState, editorAnalyticsAPI);
     }
     return true;
   };
@@ -157,7 +158,7 @@ var removeInlineCard = exports.removeInlineCard = function removeInlineCard(stat
 };
 var toggleBorderMark = exports.toggleBorderMark = function toggleBorderMark(editorAnalyticsAPI) {
   return function (state, dispatch) {
-    var nodeWithPos = (0, _currentMediaNode.currentMediaNodeWithPos)(state) || (0, _currentMediaNode.currentMediaInlineNodeWithPos)(state);
+    var nodeWithPos = (0, _mediaSingle.currentMediaNodeWithPos)(state) || (0, _currentMediaNode.currentMediaInlineNodeWithPos)(state);
     if (!nodeWithPos) {
       return false;
     }
@@ -217,7 +218,7 @@ var setBorderMark = exports.setBorderMark = function setBorderMark(editorAnalyti
   return function (attrs) {
     return function (state, dispatch) {
       var _node$marks$find, _ref, _attrs$color, _ref2, _attrs$size;
-      var nodeWithPos = (0, _currentMediaNode.currentMediaNodeWithPos)(state) || (0, _currentMediaNode.currentMediaInlineNodeWithPos)(state);
+      var nodeWithPos = (0, _mediaSingle.currentMediaNodeWithPos)(state) || (0, _currentMediaNode.currentMediaInlineNodeWithPos)(state);
       if (!nodeWithPos) {
         return false;
       }

package/dist/cjs/toolbar/comments.js

@@ -6,12 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.commentButton = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _media = require("@atlaskit/editor-common/media");
 var _comment = _interopRequireDefault(require("@atlaskit/icon/glyph/comment"));
-var commentButton = exports.commentButton = function commentButton(intl, state, editorAnalyticsAPI) {
+var commentButton = exports.commentButton = function commentButton(intl, state, api) {
   var title = intl.formatMessage(_media.commentMessages.addCommentOnMedia);
-  var onClickHandler = function onClickHandler() {
+  var onClickHandler = function onClickHandler(state, dispatch) {
+    if (api && api.annotation) {
+      api.annotation.actions.setInlineCommentDraftState(true,
+      // TODO: might need to update to reflect it's from media floating toolbar
+      _analytics.INPUT_METHOD.FLOATING_TB, 'block', true)(state, dispatch);
+    }
     return true;
   };
   return {

package/dist/cjs/toolbar/imageBorder.js

@@ -4,13 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.shouldShowImageBorder = shouldShowImageBorder;
+var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _currentMediaNode = require("../utils/current-media-node");
 function shouldShowImageBorder(editorState) {
   var border = editorState.schema.marks.border;
   if (!border) {
     return false;
   }
-  var nodeWithPos = (0, _currentMediaNode.currentMediaNodeWithPos)(editorState) || (0, _currentMediaNode.currentMediaInlineNodeWithPos)(editorState);
+  var nodeWithPos = (0, _mediaSingle.currentMediaNodeWithPos)(editorState) || (0, _currentMediaNode.currentMediaInlineNodeWithPos)(editorState);
   if (!nodeWithPos) {
     return false;
   }

package/dist/cjs/toolbar/index.js

@@ -406,8 +406,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       });
     }
     if (editorFeatureFlags && editorFeatureFlags.commentsOnMedia) {
-      var _pluginInjectionApi$a6;
-      toolbarButtons.push((0, _comments.commentButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions), {
+      toolbarButtons.push((0, _comments.commentButton)(intl, state, pluginInjectionApi), {
         type: 'separator'
       });
     }
@@ -426,10 +425,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
             };
             var openLink = function openLink() {
               if (editorView) {
-                var _pluginInjectionApi$a7;
+                var _pluginInjectionApi$a6;
                 var tr = editorView.state.tr,
                   dispatch = editorView.dispatch;
-                pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 || _pluginInjectionApi$a7.actions.attachAnalyticsEvent({
+                pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 || _pluginInjectionApi$a6.actions.attachAnalyticsEvent({
                   eventType: _analytics.EVENT_TYPE.TRACK,
                   action: _analytics.ACTION.VISITED,
                   actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
@@ -466,8 +465,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     }
   }
   if (allowAltTextOnImages) {
-    var _pluginInjectionApi$a8;
-    toolbarButtons.push((0, _altText2.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions), {
+    var _pluginInjectionApi$a7;
+    toolbarButtons.push((0, _altText2.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions), {
       type: 'separator'
     });
   }
@@ -556,14 +555,14 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
     selectedNodeType = state.selection.node.type;
   }
   if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
-    var _pluginInjectionApi$a9, _pluginInjectionApi$f2;
+    var _pluginInjectionApi$a8, _pluginInjectionApi$f2;
     var mediaOffset = state.selection.$from.parentOffset + 1;
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele;
       var selector = (0, _mediaFilmstrip.mediaFilmstripItemDOMSelector)(mediaOffset);
       return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
     };
-    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a9 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a9 === void 0 ? void 0 : _pluginInjectionApi$a9.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 || (_pluginInjectionApi$f2 = _pluginInjectionApi$f2.actions) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.forceFocusSelector);
+    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 || (_pluginInjectionApi$f2 = _pluginInjectionApi$f2.actions) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.forceFocusSelector);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele2;

package/dist/cjs/utils/current-media-node.js

@@ -3,25 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.currentMediaOrInlineNodeBorderMark = exports.currentMediaNodeWithPos = exports.currentMediaNode = exports.currentMediaInlineNodeWithPos = exports.currentMediaInlineNode = void 0;
+exports.currentMediaOrInlineNodeBorderMark = exports.currentMediaNode = exports.currentMediaInlineNodeWithPos = exports.currentMediaInlineNode = void 0;
+var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _state = require("@atlaskit/editor-prosemirror/state");
-var currentMediaNodeWithPos = exports.currentMediaNodeWithPos = function currentMediaNodeWithPos(editorState) {
-  var doc = editorState.doc,
-    selection = editorState.selection,
-    schema = editorState.schema;
-  if (!doc || !selection || !(selection instanceof _state.NodeSelection) || selection.node.type !== schema.nodes.mediaSingle) {
-    return;
-  }
-  var pos = selection.$anchor.pos + 1;
-  var node = doc.nodeAt(pos);
-  if (!node || node.type !== schema.nodes.media) {
-    return;
-  }
-  return {
-    node: node,
-    pos: pos
-  };
-};
 var currentMediaInlineNodeWithPos = exports.currentMediaInlineNodeWithPos = function currentMediaInlineNodeWithPos(editorState) {
   var doc = editorState.doc,
     selection = editorState.selection,
@@ -41,7 +25,7 @@ var currentMediaInlineNodeWithPos = exports.currentMediaInlineNodeWithPos = func
 };
 var currentMediaNode = exports.currentMediaNode = function currentMediaNode(editorState) {
   var _currentMediaNodeWith;
-  return (_currentMediaNodeWith = currentMediaNodeWithPos(editorState)) === null || _currentMediaNodeWith === void 0 ? void 0 : _currentMediaNodeWith.node;
+  return (_currentMediaNodeWith = (0, _mediaSingle.currentMediaNodeWithPos)(editorState)) === null || _currentMediaNodeWith === void 0 ? void 0 : _currentMediaNodeWith.node;
 };
 var currentMediaInlineNode = exports.currentMediaInlineNode = function currentMediaInlineNode(editorState) {
   var _currentMediaInlineNo;

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

@@ -60,6 +60,8 @@ export class MediaPluginStateImplementation {
     _defineProperty(this, "isResizing", false);
     _defineProperty(this, "resizingWidth", 0);
     _defineProperty(this, "allowInlineImages", false);
+    _defineProperty(this, "uploadInProgressSubscriptions", []);
+    _defineProperty(this, "uploadInProgressSubscriptionsNotified", 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);
@@ -179,6 +181,10 @@ export class MediaPluginStateImplementation {
           allUploadsFinished: false
         });
       }
+      if (this.uploadInProgressSubscriptions.length > 0 && !this.uploadInProgressSubscriptionsNotified) {
+        this.uploadInProgressSubscriptions.forEach(fn => fn(true));
+        this.uploadInProgressSubscriptionsNotified = true;
+      }
       switch (getMediaNodeInsertionType(state, this.mediaOptions, mediaStateWithContext.fileMimeType)) {
         case 'inline':
           insertMediaInlineNode(editorAnalyticsAPI)(this.view, mediaStateWithContext, collection, this.allowInlineImages, this.getInputMethod(pickerType));
@@ -221,6 +227,12 @@ export class MediaPluginStateImplementation {
       if (!view.hasFocus()) {
         view.focus();
       }
+      this.waitForPendingTasks().then(() => {
+        if (this.uploadInProgressSubscriptions.length > 0 && this.uploadInProgressSubscriptionsNotified) {
+          this.uploadInProgressSubscriptions.forEach(fn => fn(false));
+          this.uploadInProgressSubscriptionsNotified = false;
+        }
+      });
       if (getBooleanFF('platform.editor.media.autoselect-inserted-image_oumto')) {
         this.selectLastAddedMediaNode();
       }
@@ -452,6 +464,12 @@ export class MediaPluginStateImplementation {
       }
     });
   }
+  subscribeToUploadInProgressState(fn) {
+    this.uploadInProgressSubscriptions.push(fn);
+  }
+  unsubscribeFromUploadInProgressState(fn) {
+    this.uploadInProgressSubscriptions = this.uploadInProgressSubscriptions.filter(subscribedFn => subscribedFn !== fn);
+  }
   setIsResizing(isResizing) {
     this.isResizing = isResizing;
   }

package/dist/es2019/toolbar/commands.js

@@ -1,10 +1,11 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { currentMediaNodeWithPos } from '@atlaskit/editor-common/media-single';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeClosestToPos, isNodeSelection, removeSelectedNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { findChangeFromLocation, getChangeMediaAnalytics, getMediaInputResizeAnalyticsEvent } from '../utils/analytics';
-import { currentMediaInlineNodeWithPos, currentMediaNodeWithPos } from '../utils/current-media-node';
+import { currentMediaInlineNodeWithPos } from '../utils/current-media-node';
 import { isSelectionMediaSingleNode } from '../utils/media-common';
 import { changeFromMediaInlineToMediaSingleNode } from '../utils/media-single';
 import { getSelectedMediaSingle, removeMediaGroupNode } from './utils';

package/dist/es2019/toolbar/comments.js

@@ -1,10 +1,16 @@
 import React from 'react';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { commentMessages as messages } from '@atlaskit/editor-common/media';
 import CommentIcon from '@atlaskit/icon/glyph/comment';
-export const commentButton = (intl, state, editorAnalyticsAPI) => {
+export const commentButton = (intl, state, api) => {
   const title = intl.formatMessage(messages.addCommentOnMedia);
-  const onClickHandler = () => {
+  const onClickHandler = (state, dispatch) => {
+    if (api && api.annotation) {
+      api.annotation.actions.setInlineCommentDraftState(true,
+      // TODO: might need to update to reflect it's from media floating toolbar
+      INPUT_METHOD.FLOATING_TB, 'block', true)(state, dispatch);
+    }
     return true;
   };
   return {

package/dist/es2019/toolbar/imageBorder.js

@@ -1,4 +1,5 @@
-import { currentMediaInlineNodeWithPos, currentMediaNodeWithPos } from '../utils/current-media-node';
+import { currentMediaNodeWithPos } from '@atlaskit/editor-common/media-single';
+import { currentMediaInlineNodeWithPos } from '../utils/current-media-node';
 export function shouldShowImageBorder(editorState) {
   const border = editorState.schema.marks.border;
   if (!border) {

package/dist/es2019/toolbar/index.js

@@ -403,8 +403,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
       });
     }
     if (editorFeatureFlags && editorFeatureFlags.commentsOnMedia) {
-      var _pluginInjectionApi$a6;
-      toolbarButtons.push(commentButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions), {
+      toolbarButtons.push(commentButton(intl, state, pluginInjectionApi), {
         type: 'separator'
       });
     }
@@ -425,14 +424,14 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
             };
             const openLink = () => {
               if (editorView) {
-                var _pluginInjectionApi$a7;
+                var _pluginInjectionApi$a6;
                 const {
                   state: {
                     tr
                   },
                   dispatch
                 } = editorView;
-                pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions.attachAnalyticsEvent({
+                pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions.attachAnalyticsEvent({
                   eventType: EVENT_TYPE.TRACK,
                   action: ACTION.VISITED,
                   actionSubject: ACTION_SUBJECT.MEDIA,
@@ -469,8 +468,8 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
     }
   }
   if (allowAltTextOnImages) {
-    var _pluginInjectionApi$a8;
-    toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions), {
+    var _pluginInjectionApi$a7;
+    toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions), {
       type: 'separator'
     });
   }
@@ -557,14 +556,14 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
     selectedNodeType = state.selection.node.type;
   }
   if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
-    var _pluginInjectionApi$a9, _pluginInjectionApi$f3, _pluginInjectionApi$f4;
+    var _pluginInjectionApi$a8, _pluginInjectionApi$f3, _pluginInjectionApi$f4;
     const mediaOffset = state.selection.$from.parentOffset + 1;
     baseToolbar.getDomRef = () => {
       var _mediaPluginState$ele;
       const selector = mediaFilmstripItemDOMSelector(mediaOffset);
       return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
     };
-    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a9 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a9 === void 0 ? void 0 : _pluginInjectionApi$a9.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f3 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f3 === void 0 ? void 0 : (_pluginInjectionApi$f4 = _pluginInjectionApi$f3.actions) === null || _pluginInjectionApi$f4 === void 0 ? void 0 : _pluginInjectionApi$f4.forceFocusSelector);
+    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f3 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f3 === void 0 ? void 0 : (_pluginInjectionApi$f4 = _pluginInjectionApi$f3.actions) === null || _pluginInjectionApi$f4 === void 0 ? void 0 : _pluginInjectionApi$f4.forceFocusSelector);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
     baseToolbar.getDomRef = () => {
       var _mediaPluginState$ele2;

package/dist/es2019/utils/current-media-node.js

@@ -1,23 +1,5 @@
+import { currentMediaNodeWithPos } from '@atlaskit/editor-common/media-single';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-export const currentMediaNodeWithPos = editorState => {
-  const {
-    doc,
-    selection,
-    schema
-  } = editorState;
-  if (!doc || !selection || !(selection instanceof NodeSelection) || selection.node.type !== schema.nodes.mediaSingle) {
-    return;
-  }
-  const pos = selection.$anchor.pos + 1;
-  const node = doc.nodeAt(pos);
-  if (!node || node.type !== schema.nodes.media) {
-    return;
-  }
-  return {
-    node,
-    pos
-  };
-};
 export const currentMediaInlineNodeWithPos = editorState => {
   const {
     doc,

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

@@ -72,6 +72,8 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
     _defineProperty(this, "isResizing", false);
     _defineProperty(this, "resizingWidth", 0);
     _defineProperty(this, "allowInlineImages", false);
+    _defineProperty(this, "uploadInProgressSubscriptions", []);
+    _defineProperty(this, "uploadInProgressSubscriptionsNotified", 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);
@@ -216,6 +218,12 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
           allUploadsFinished: false
         });
       }
+      if (_this.uploadInProgressSubscriptions.length > 0 && !_this.uploadInProgressSubscriptionsNotified) {
+        _this.uploadInProgressSubscriptions.forEach(function (fn) {
+          return fn(true);
+        });
+        _this.uploadInProgressSubscriptionsNotified = true;
+      }
       switch (getMediaNodeInsertionType(state, _this.mediaOptions, mediaStateWithContext.fileMimeType)) {
         case 'inline':
           insertMediaInlineNode(editorAnalyticsAPI)(_this.view, mediaStateWithContext, collection, _this.allowInlineImages, _this.getInputMethod(pickerType));
@@ -258,6 +266,14 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
       if (!view.hasFocus()) {
         view.focus();
       }
+      _this.waitForPendingTasks().then(function () {
+        if (_this.uploadInProgressSubscriptions.length > 0 && _this.uploadInProgressSubscriptionsNotified) {
+          _this.uploadInProgressSubscriptions.forEach(function (fn) {
+            return fn(false);
+          });
+          _this.uploadInProgressSubscriptionsNotified = false;
+        }
+      });
       if (getBooleanFF('platform.editor.media.autoselect-inserted-image_oumto')) {
         _this.selectLastAddedMediaNode();
       }
@@ -492,6 +508,18 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
         }
       });
     }
+  }, {
+    key: "subscribeToUploadInProgressState",
+    value: function subscribeToUploadInProgressState(fn) {
+      this.uploadInProgressSubscriptions.push(fn);
+    }
+  }, {
+    key: "unsubscribeFromUploadInProgressState",
+    value: function unsubscribeFromUploadInProgressState(fn) {
+      this.uploadInProgressSubscriptions = this.uploadInProgressSubscriptions.filter(function (subscribedFn) {
+        return subscribedFn !== fn;
+      });
+    }
   }, {
     key: "setIsResizing",
     value: function setIsResizing(isResizing) {

package/dist/esm/toolbar/commands.js

@@ -2,12 +2,13 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { currentMediaNodeWithPos } from '@atlaskit/editor-common/media-single';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeClosestToPos, isNodeSelection, removeSelectedNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { findChangeFromLocation, getChangeMediaAnalytics, getMediaInputResizeAnalyticsEvent } from '../utils/analytics';
-import { currentMediaInlineNodeWithPos, currentMediaNodeWithPos } from '../utils/current-media-node';
+import { currentMediaInlineNodeWithPos } from '../utils/current-media-node';
 import { isSelectionMediaSingleNode } from '../utils/media-common';
 import { changeFromMediaInlineToMediaSingleNode } from '../utils/media-single';
 import { getSelectedMediaSingle, removeMediaGroupNode } from './utils';

package/dist/esm/toolbar/comments.js

@@ -1,10 +1,16 @@
 import React from 'react';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { commentMessages as messages } from '@atlaskit/editor-common/media';
 import CommentIcon from '@atlaskit/icon/glyph/comment';
-export var commentButton = function commentButton(intl, state, editorAnalyticsAPI) {
+export var commentButton = function commentButton(intl, state, api) {
   var title = intl.formatMessage(messages.addCommentOnMedia);
-  var onClickHandler = function onClickHandler() {
+  var onClickHandler = function onClickHandler(state, dispatch) {
+    if (api && api.annotation) {
+      api.annotation.actions.setInlineCommentDraftState(true,
+      // TODO: might need to update to reflect it's from media floating toolbar
+      INPUT_METHOD.FLOATING_TB, 'block', true)(state, dispatch);
+    }
     return true;
   };
   return {

package/dist/esm/toolbar/imageBorder.js

@@ -1,4 +1,5 @@
-import { currentMediaInlineNodeWithPos, currentMediaNodeWithPos } from '../utils/current-media-node';
+import { currentMediaNodeWithPos } from '@atlaskit/editor-common/media-single';
+import { currentMediaInlineNodeWithPos } from '../utils/current-media-node';
 export function shouldShowImageBorder(editorState) {
   var border = editorState.schema.marks.border;
   if (!border) {

package/dist/esm/toolbar/index.js

@@ -396,8 +396,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       });
     }
     if (editorFeatureFlags && editorFeatureFlags.commentsOnMedia) {
-      var _pluginInjectionApi$a6;
-      toolbarButtons.push(commentButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions), {
+      toolbarButtons.push(commentButton(intl, state, pluginInjectionApi), {
         type: 'separator'
       });
     }
@@ -416,10 +415,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
             };
             var openLink = function openLink() {
               if (editorView) {
-                var _pluginInjectionApi$a7;
+                var _pluginInjectionApi$a6;
                 var tr = editorView.state.tr,
                   dispatch = editorView.dispatch;
-                pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 || _pluginInjectionApi$a7.actions.attachAnalyticsEvent({
+                pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 || _pluginInjectionApi$a6.actions.attachAnalyticsEvent({
                   eventType: EVENT_TYPE.TRACK,
                   action: ACTION.VISITED,
                   actionSubject: ACTION_SUBJECT.MEDIA,
@@ -456,8 +455,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     }
   }
   if (allowAltTextOnImages) {
-    var _pluginInjectionApi$a8;
-    toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions), {
+    var _pluginInjectionApi$a7;
+    toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions), {
       type: 'separator'
     });
   }
@@ -546,14 +545,14 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
     selectedNodeType = state.selection.node.type;
   }
   if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
-    var _pluginInjectionApi$a9, _pluginInjectionApi$f2;
+    var _pluginInjectionApi$a8, _pluginInjectionApi$f2;
     var mediaOffset = state.selection.$from.parentOffset + 1;
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele;
       var selector = mediaFilmstripItemDOMSelector(mediaOffset);
       return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
     };
-    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a9 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a9 === void 0 ? void 0 : _pluginInjectionApi$a9.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 || (_pluginInjectionApi$f2 = _pluginInjectionApi$f2.actions) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.forceFocusSelector);
+    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 || (_pluginInjectionApi$f2 = _pluginInjectionApi$f2.actions) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.forceFocusSelector);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele2;

package/dist/esm/utils/current-media-node.js

@@ -1,21 +1,5 @@
+import { currentMediaNodeWithPos } from '@atlaskit/editor-common/media-single';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-export var currentMediaNodeWithPos = function currentMediaNodeWithPos(editorState) {
-  var doc = editorState.doc,
-    selection = editorState.selection,
-    schema = editorState.schema;
-  if (!doc || !selection || !(selection instanceof NodeSelection) || selection.node.type !== schema.nodes.mediaSingle) {
-    return;
-  }
-  var pos = selection.$anchor.pos + 1;
-  var node = doc.nodeAt(pos);
-  if (!node || node.type !== schema.nodes.media) {
-    return;
-  }
-  return {
-    node: node,
-    pos: pos
-  };
-};
 export var currentMediaInlineNodeWithPos = function currentMediaInlineNodeWithPos(editorState) {
   var doc = editorState.doc,
     selection = editorState.selection,

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

@@ -37,6 +37,10 @@ export declare class MediaPluginStateImplementation implements MediaPluginState
     resizingWidth: number;
     currentMaxWidth?: number;
     allowInlineImages: boolean;
+    uploadInProgressSubscriptions: {
+        (isUploading: boolean): void;
+    }[];
+    uploadInProgressSubscriptionsNotified: boolean;
     lastAddedMediaSingleFileIds: {
         id: string;
         selectionPosition: number;
@@ -60,6 +64,8 @@ export declare class MediaPluginStateImplementation implements MediaPluginState
     singletonCreatedAt: number;
     constructor(state: EditorState, options: MediaPluginOptions, mediaOptions: MediaOptions | undefined, newInsertionBehaviour: boolean | undefined, dispatch: Dispatch | undefined, pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined);
     clone(): this;
+    subscribeToUploadInProgressState(fn: (isUploading: boolean) => void): void;
+    unsubscribeFromUploadInProgressState(fn: (isUploading: boolean) => void): void;
     setMediaProvider: (mediaProvider?: Promise<MediaProvider>) => Promise<void>;
     getMediaOptions: () => MediaPluginOptions;
     setIsResizing(isResizing: boolean): void;

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

@@ -66,5 +66,7 @@ export interface MediaPluginState {
     destroy(): void;
     updateAndDispatch(props: Partial<Pick<this, 'allowsUploads' | 'allUploadsFinished' | 'isFullscreen'>>): void;
     clone(): MediaPluginState;
+    subscribeToUploadInProgressState(fn: (isUploading: boolean) => void): void;
+    unsubscribeFromUploadInProgressState(fn: (isUploading: boolean) => void): void;
 }
 export type EventInput = 'keyboard' | 'mouse' | 'floatingToolBar';

package/dist/types/toolbar/comments.d.ts

@@ -1,5 +1,5 @@
 import type { IntlShape } from 'react-intl-next';
-import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { Command, FloatingToolbarButton } from '@atlaskit/editor-common/types';
+import type { Command, ExtractInjectionAPI, FloatingToolbarButton } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
-export declare const commentButton: (intl: IntlShape, state: EditorState, editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => FloatingToolbarButton<Command>;
+import type { MediaNextEditorPluginType } from '../next-plugin-type';
+export declare const commentButton: (intl: IntlShape, state: EditorState, api: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined) => FloatingToolbarButton<Command>;

package/dist/types/utils/current-media-node.d.ts

@@ -1,10 +1,6 @@
 import type { BorderMarkAttributes } from '@atlaskit/adf-schema';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
-export declare const currentMediaNodeWithPos: (editorState: EditorState) => {
-    node: PMNode;
-    pos: number;
-} | undefined;
 export declare const currentMediaInlineNodeWithPos: (editorState: EditorState) => {
     node: PMNode;
     pos: number;

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

@@ -37,6 +37,10 @@ export declare class MediaPluginStateImplementation implements MediaPluginState
     resizingWidth: number;
     currentMaxWidth?: number;
     allowInlineImages: boolean;
+    uploadInProgressSubscriptions: {
+        (isUploading: boolean): void;
+    }[];
+    uploadInProgressSubscriptionsNotified: boolean;
     lastAddedMediaSingleFileIds: {
         id: string;
         selectionPosition: number;
@@ -60,6 +64,8 @@ export declare class MediaPluginStateImplementation implements MediaPluginState
     singletonCreatedAt: number;
     constructor(state: EditorState, options: MediaPluginOptions, mediaOptions: MediaOptions | undefined, newInsertionBehaviour: boolean | undefined, dispatch: Dispatch | undefined, pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined);
     clone(): this;
+    subscribeToUploadInProgressState(fn: (isUploading: boolean) => void): void;
+    unsubscribeFromUploadInProgressState(fn: (isUploading: boolean) => void): void;
     setMediaProvider: (mediaProvider?: Promise<MediaProvider>) => Promise<void>;
     getMediaOptions: () => MediaPluginOptions;
     setIsResizing(isResizing: boolean): void;

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

@@ -66,5 +66,7 @@ export interface MediaPluginState {
     destroy(): void;
     updateAndDispatch(props: Partial<Pick<this, 'allowsUploads' | 'allUploadsFinished' | 'isFullscreen'>>): void;
     clone(): MediaPluginState;
+    subscribeToUploadInProgressState(fn: (isUploading: boolean) => void): void;
+    unsubscribeFromUploadInProgressState(fn: (isUploading: boolean) => void): void;
 }
 export type EventInput = 'keyboard' | 'mouse' | 'floatingToolBar';

package/dist/types-ts4.5/toolbar/comments.d.ts

@@ -1,5 +1,5 @@
 import type { IntlShape } from 'react-intl-next';
-import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { Command, FloatingToolbarButton } from '@atlaskit/editor-common/types';
+import type { Command, ExtractInjectionAPI, FloatingToolbarButton } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
-export declare const commentButton: (intl: IntlShape, state: EditorState, editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => FloatingToolbarButton<Command>;
+import type { MediaNextEditorPluginType } from '../next-plugin-type';
+export declare const commentButton: (intl: IntlShape, state: EditorState, api: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined) => FloatingToolbarButton<Command>;

package/dist/types-ts4.5/utils/current-media-node.d.ts

@@ -1,10 +1,6 @@
 import type { BorderMarkAttributes } from '@atlaskit/adf-schema';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
-export declare const currentMediaNodeWithPos: (editorState: EditorState) => {
-    node: PMNode;
-    pos: number;
-} | undefined;
 export declare const currentMediaInlineNodeWithPos: (editorState: EditorState) => {
     node: PMNode;
     pos: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-media",
-  "version": "1.7.0",
+  "version": "1.8.1",
   "description": "Media plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -40,7 +40,7 @@
     "@atlaskit/editor-common": "^78.11.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
-    "@atlaskit/editor-plugin-annotation": "1.1.0",
+    "@atlaskit/editor-plugin-annotation": "1.2.1",
     "@atlaskit/editor-plugin-decorations": "^1.0.0",
     "@atlaskit/editor-plugin-editor-disabled": "^1.0.0",
     "@atlaskit/editor-plugin-floating-toolbar": "^1.2.0",
@@ -60,7 +60,7 @@
     "@atlaskit/media-common": "^11.0.0",
     "@atlaskit/media-filmstrip": "^47.0.0",
     "@atlaskit/media-picker": "^66.3.0",
-    "@atlaskit/media-ui": "^25.3.0",
+    "@atlaskit/media-ui": "^25.4.0",
     "@atlaskit/media-viewer": "^48.3.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/primitives": "^4.0.0",