@atlaskit/editor-plugin-media 1.40.0 → 1.41.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-media
 
+## 1.41.0
+
+### Minor Changes
+
+- [#161814](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/161814)
+  [`6ff956fe6b784`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6ff956fe6b784) -
+  [ux] Add a new property to annotation state to know whether or not we're opening the comment box
+  from the media toolbar so we can scroll it into view from Confluence side
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.40.1
+
+### Patch Changes
+
+- [#163299](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/163299)
+  [`164ca5d30a1ca`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/164ca5d30a1ca) -
+  ED-25335-make-media-single-non-editable-in-live-view
+
 ## 1.40.0
 
 ### Minor Changes

package/dist/cjs/nodeviews/mediaSingle.js

@@ -648,10 +648,18 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
     key: "createDomRef",
     value: function createDomRef() {
       var domRef = document.createElement('div');
-      if (this.reactComponentProps.mediaOptions && this.reactComponentProps.mediaOptions.allowMediaSingleEditable) {
-        // workaround Chrome bug in https://product-fabric.atlassian.net/browse/ED-5379
-        // see also: https://github.com/ProseMirror/prosemirror/issues/884
-        domRef.contentEditable = 'true';
+      if ((0, _platformFeatureFlags.fg)('platform_editor_prevent_delete_image_in_view_mode')) {
+        var _this$reactComponentP;
+        // controll the domRef contentEditable attribute based on the editor view mode
+        this.unsubscribeToViewModeChange = this.subscribeToViewModeChange(domRef);
+        var initialViewMode = (_this$reactComponentP = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP === void 0 || (_this$reactComponentP = _this$reactComponentP.editorViewMode) === null || _this$reactComponentP === void 0 || (_this$reactComponentP = _this$reactComponentP.sharedState.currentState()) === null || _this$reactComponentP === void 0 ? void 0 : _this$reactComponentP.mode;
+        this.updateDomRefContentEditable(domRef, initialViewMode);
+      } else {
+        if (this.reactComponentProps.mediaOptions && this.reactComponentProps.mediaOptions.allowMediaSingleEditable) {
+          // workaround Chrome bug in https://product-fabric.atlassian.net/browse/ED-5379
+          // see also: https://github.com/ProseMirror/prosemirror/issues/884
+          domRef.contentEditable = 'true';
+        }
       }
       if ((0, _platformFeatureFlags.fg)('platform_editor_media_extended_resize_experience')) {
         domRef.classList.add('media-extended-resize-experience');
@@ -685,6 +693,33 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
       }
       return (0, _get2.default)((0, _getPrototypeOf2.default)(MediaSingleNodeView.prototype), "viewShouldUpdate", this).call(this, nextNode);
     }
+  }, {
+    key: "subscribeToViewModeChange",
+    value: function subscribeToViewModeChange(domRef) {
+      var _this$reactComponentP2,
+        _this3 = this;
+      return (_this$reactComponentP2 = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP2 === void 0 || (_this$reactComponentP2 = _this$reactComponentP2.editorViewMode) === null || _this$reactComponentP2 === void 0 ? void 0 : _this$reactComponentP2.sharedState.onChange(function (viewModeState) {
+        var _viewModeState$nextSh;
+        _this3.updateDomRefContentEditable(domRef, (_viewModeState$nextSh = viewModeState.nextSharedState) === null || _viewModeState$nextSh === void 0 ? void 0 : _viewModeState$nextSh.mode);
+      });
+    }
+  }, {
+    key: "updateDomRefContentEditable",
+    value: function updateDomRefContentEditable(domRef, editorViewMode) {
+      var _this$reactComponentP3;
+      // if the editor is in view mode, we should not allow editing
+      if (editorViewMode === 'view') {
+        domRef.contentEditable = 'false';
+        return;
+      }
+
+      // if the editor is in edit mode, we should allow editing if the media options allow it
+      if ((_this$reactComponentP3 = this.reactComponentProps.mediaOptions) !== null && _this$reactComponentP3 !== void 0 && _this$reactComponentP3.allowMediaSingleEditable) {
+        // workaround Chrome bug in https://product-fabric.atlassian.net/browse/ED-5379
+        // see also: https://github.com/ProseMirror/prosemirror/issues/884
+        domRef.contentEditable = 'true';
+      }
+    }
   }, {
     key: "getNodeMediaId",
     value: function getNodeMediaId(node) {
@@ -707,10 +742,10 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "update",
     value: function update(node, decorations, _innerDecorations, isValidUpdate) {
-      var _this3 = this;
+      var _this4 = this;
       if (!isValidUpdate) {
         isValidUpdate = function isValidUpdate(currentNode, newNode) {
-          return _this3.getNodeMediaId(currentNode) === _this3.getNodeMediaId(newNode);
+          return _this4.getNodeMediaId(currentNode) === _this4.getNodeMediaId(newNode);
         };
       }
       return (0, _get2.default)((0, _getPrototypeOf2.default)(MediaSingleNodeView.prototype), "update", this).call(this, node, decorations, _innerDecorations, isValidUpdate);
@@ -718,15 +753,15 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "render",
     value: function render(props, forwardRef) {
-      var _this4 = this;
-      var _this$reactComponentP = this.reactComponentProps,
-        eventDispatcher = _this$reactComponentP.eventDispatcher,
-        fullWidthMode = _this$reactComponentP.fullWidthMode,
-        providerFactory = _this$reactComponentP.providerFactory,
-        mediaOptions = _this$reactComponentP.mediaOptions,
-        dispatchAnalyticsEvent = _this$reactComponentP.dispatchAnalyticsEvent,
-        pluginInjectionApi = _this$reactComponentP.pluginInjectionApi,
-        editorAppearance = _this$reactComponentP.editorAppearance;
+      var _this5 = this;
+      var _this$reactComponentP4 = this.reactComponentProps,
+        eventDispatcher = _this$reactComponentP4.eventDispatcher,
+        fullWidthMode = _this$reactComponentP4.fullWidthMode,
+        providerFactory = _this$reactComponentP4.providerFactory,
+        mediaOptions = _this$reactComponentP4.mediaOptions,
+        dispatchAnalyticsEvent = _this$reactComponentP4.dispatchAnalyticsEvent,
+        pluginInjectionApi = _this$reactComponentP4.pluginInjectionApi,
+        editorAppearance = _this$reactComponentP4.editorAppearance;
 
       // getPos is a boolean for marks, since this is a node we know it must be a function
       var getPos = this.getPos;
@@ -738,12 +773,12 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
           return (0, _react2.jsx)(MediaSingleNodeWrapper, {
             pluginInjectionApi: pluginInjectionApi,
             contextIdentifierProvider: contextIdentifierProvider,
-            node: _this4.node,
+            node: _this5.node,
             getPos: getPos,
             mediaOptions: mediaOptions,
-            view: _this4.view,
+            view: _this5.view,
             fullWidthMode: fullWidthMode,
-            selected: _this4.isNodeSelected,
+            selected: _this5.isNodeSelected,
             eventDispatcher: eventDispatcher,
             dispatchAnalyticsEvent: dispatchAnalyticsEvent,
             forwardRef: forwardRef,
@@ -768,6 +803,12 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
       }
       return true;
     }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var _this$unsubscribeToVi;
+      (_this$unsubscribeToVi = this.unsubscribeToViewModeChange) === null || _this$unsubscribeToVi === void 0 || _this$unsubscribeToVi.call(this);
+    }
   }]);
   return MediaSingleNodeView;
 }(_reactNodeView.default);

package/dist/cjs/toolbar/comments.js

@@ -11,6 +11,7 @@ var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _media = require("@atlaskit/editor-common/media");
 var _comment = _interopRequireDefault(require("@atlaskit/icon/core/comment"));
 var _comment2 = _interopRequireDefault(require("@atlaskit/icon/glyph/comment"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commentWithDotIcon = require("./assets/commentWithDotIcon");
 var _utils = require("./utils");
 var commentButton = exports.commentButton = function commentButton(intl, state, api) {
@@ -29,11 +30,12 @@ var commentButton = exports.commentButton = function commentButton(intl, state,
       var _api$annotation$actio = api.annotation.actions,
         showCommentForBlockNode = _api$annotation$actio.showCommentForBlockNode,
         setInlineCommentDraftState = _api$annotation$actio.setInlineCommentDraftState;
-      if (!showCommentForBlockNode(selectMediaNode, _analytics.VIEW_METHOD.COMMENT_BUTTON)(state, dispatch)) {
+      var isOpeningMediaCommentFromToolbar = (0, _platformFeatureFlags.fg)('confluence_frontend_media_scroll_fix') ? true : false;
+      if (!showCommentForBlockNode(selectMediaNode, _analytics.VIEW_METHOD.COMMENT_BUTTON, isOpeningMediaCommentFromToolbar)(state, dispatch)) {
         var _selectMediaNode$attr;
         setInlineCommentDraftState(true,
         // TODO: might need to update to reflect it's from media floating toolbar
-        _analytics.INPUT_METHOD.FLOATING_TB, 'block', (_selectMediaNode$attr = selectMediaNode.attrs) === null || _selectMediaNode$attr === void 0 ? void 0 : _selectMediaNode$attr.id)(state, dispatch);
+        _analytics.INPUT_METHOD.FLOATING_TB, 'block', (_selectMediaNode$attr = selectMediaNode.attrs) === null || _selectMediaNode$attr === void 0 ? void 0 : _selectMediaNode$attr.id, isOpeningMediaCommentFromToolbar)(state, dispatch);
       }
     }
     return true;

package/dist/es2019/nodeviews/mediaSingle.js

@@ -555,10 +555,18 @@ class MediaSingleNodeView extends ReactNodeView {
   }
   createDomRef() {
     const domRef = document.createElement('div');
-    if (this.reactComponentProps.mediaOptions && this.reactComponentProps.mediaOptions.allowMediaSingleEditable) {
-      // workaround Chrome bug in https://product-fabric.atlassian.net/browse/ED-5379
-      // see also: https://github.com/ProseMirror/prosemirror/issues/884
-      domRef.contentEditable = 'true';
+    if (fg('platform_editor_prevent_delete_image_in_view_mode')) {
+      var _this$reactComponentP, _this$reactComponentP2, _this$reactComponentP3;
+      // controll the domRef contentEditable attribute based on the editor view mode
+      this.unsubscribeToViewModeChange = this.subscribeToViewModeChange(domRef);
+      const initialViewMode = (_this$reactComponentP = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP === void 0 ? void 0 : (_this$reactComponentP2 = _this$reactComponentP.editorViewMode) === null || _this$reactComponentP2 === void 0 ? void 0 : (_this$reactComponentP3 = _this$reactComponentP2.sharedState.currentState()) === null || _this$reactComponentP3 === void 0 ? void 0 : _this$reactComponentP3.mode;
+      this.updateDomRefContentEditable(domRef, initialViewMode);
+    } else {
+      if (this.reactComponentProps.mediaOptions && this.reactComponentProps.mediaOptions.allowMediaSingleEditable) {
+        // workaround Chrome bug in https://product-fabric.atlassian.net/browse/ED-5379
+        // see also: https://github.com/ProseMirror/prosemirror/issues/884
+        domRef.contentEditable = 'true';
+      }
     }
     if (fg('platform_editor_media_extended_resize_experience')) {
       domRef.classList.add('media-extended-resize-experience');
@@ -588,6 +596,28 @@ class MediaSingleNodeView extends ReactNodeView {
     }
     return super.viewShouldUpdate(nextNode);
   }
+  subscribeToViewModeChange(domRef) {
+    var _this$reactComponentP4, _this$reactComponentP5;
+    return (_this$reactComponentP4 = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP4 === void 0 ? void 0 : (_this$reactComponentP5 = _this$reactComponentP4.editorViewMode) === null || _this$reactComponentP5 === void 0 ? void 0 : _this$reactComponentP5.sharedState.onChange(viewModeState => {
+      var _viewModeState$nextSh;
+      this.updateDomRefContentEditable(domRef, (_viewModeState$nextSh = viewModeState.nextSharedState) === null || _viewModeState$nextSh === void 0 ? void 0 : _viewModeState$nextSh.mode);
+    });
+  }
+  updateDomRefContentEditable(domRef, editorViewMode) {
+    var _this$reactComponentP6;
+    // if the editor is in view mode, we should not allow editing
+    if (editorViewMode === 'view') {
+      domRef.contentEditable = 'false';
+      return;
+    }
+
+    // if the editor is in edit mode, we should allow editing if the media options allow it
+    if ((_this$reactComponentP6 = this.reactComponentProps.mediaOptions) !== null && _this$reactComponentP6 !== void 0 && _this$reactComponentP6.allowMediaSingleEditable) {
+      // workaround Chrome bug in https://product-fabric.atlassian.net/browse/ED-5379
+      // see also: https://github.com/ProseMirror/prosemirror/issues/884
+      domRef.contentEditable = 'true';
+    }
+  }
   getNodeMediaId(node) {
     if (node.firstChild) {
       return node.firstChild.attrs.id;
@@ -657,6 +687,10 @@ class MediaSingleNodeView extends ReactNodeView {
     }
     return true;
   }
+  destroy() {
+    var _this$unsubscribeToVi;
+    (_this$unsubscribeToVi = this.unsubscribeToViewModeChange) === null || _this$unsubscribeToVi === void 0 ? void 0 : _this$unsubscribeToVi.call(this);
+  }
 }
 export const ReactMediaSingleNode = (portalProviderAPI, eventDispatcher, providerFactory, pluginInjectionApi, dispatchAnalyticsEvent, mediaOptions = {}) => (node, view, getPos) => {
   return new MediaSingleNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {

package/dist/es2019/toolbar/comments.js

@@ -4,6 +4,7 @@ import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { commentMessages as messages } from '@atlaskit/editor-common/media';
 import CommentIcon from '@atlaskit/icon/core/comment';
 import LegacyCommentIcon from '@atlaskit/icon/glyph/comment';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { CommentWithDotIcon } from './assets/commentWithDotIcon';
 import { getSelectedMediaSingle } from './utils';
 export const commentButton = (intl, state, api) => {
@@ -21,11 +22,12 @@ export const commentButton = (intl, state, api) => {
         showCommentForBlockNode,
         setInlineCommentDraftState
       } = api.annotation.actions;
-      if (!showCommentForBlockNode(selectMediaNode, VIEW_METHOD.COMMENT_BUTTON)(state, dispatch)) {
+      const isOpeningMediaCommentFromToolbar = fg('confluence_frontend_media_scroll_fix') ? true : false;
+      if (!showCommentForBlockNode(selectMediaNode, VIEW_METHOD.COMMENT_BUTTON, isOpeningMediaCommentFromToolbar)(state, dispatch)) {
         var _selectMediaNode$attr;
         setInlineCommentDraftState(true,
         // TODO: might need to update to reflect it's from media floating toolbar
-        INPUT_METHOD.FLOATING_TB, 'block', (_selectMediaNode$attr = selectMediaNode.attrs) === null || _selectMediaNode$attr === void 0 ? void 0 : _selectMediaNode$attr.id)(state, dispatch);
+        INPUT_METHOD.FLOATING_TB, 'block', (_selectMediaNode$attr = selectMediaNode.attrs) === null || _selectMediaNode$attr === void 0 ? void 0 : _selectMediaNode$attr.id, isOpeningMediaCommentFromToolbar)(state, dispatch);
       }
     }
     return true;

package/dist/esm/nodeviews/mediaSingle.js

@@ -643,10 +643,18 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
     key: "createDomRef",
     value: function createDomRef() {
       var domRef = document.createElement('div');
-      if (this.reactComponentProps.mediaOptions && this.reactComponentProps.mediaOptions.allowMediaSingleEditable) {
-        // workaround Chrome bug in https://product-fabric.atlassian.net/browse/ED-5379
-        // see also: https://github.com/ProseMirror/prosemirror/issues/884
-        domRef.contentEditable = 'true';
+      if (fg('platform_editor_prevent_delete_image_in_view_mode')) {
+        var _this$reactComponentP;
+        // controll the domRef contentEditable attribute based on the editor view mode
+        this.unsubscribeToViewModeChange = this.subscribeToViewModeChange(domRef);
+        var initialViewMode = (_this$reactComponentP = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP === void 0 || (_this$reactComponentP = _this$reactComponentP.editorViewMode) === null || _this$reactComponentP === void 0 || (_this$reactComponentP = _this$reactComponentP.sharedState.currentState()) === null || _this$reactComponentP === void 0 ? void 0 : _this$reactComponentP.mode;
+        this.updateDomRefContentEditable(domRef, initialViewMode);
+      } else {
+        if (this.reactComponentProps.mediaOptions && this.reactComponentProps.mediaOptions.allowMediaSingleEditable) {
+          // workaround Chrome bug in https://product-fabric.atlassian.net/browse/ED-5379
+          // see also: https://github.com/ProseMirror/prosemirror/issues/884
+          domRef.contentEditable = 'true';
+        }
       }
       if (fg('platform_editor_media_extended_resize_experience')) {
         domRef.classList.add('media-extended-resize-experience');
@@ -680,6 +688,33 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
       }
       return _get(_getPrototypeOf(MediaSingleNodeView.prototype), "viewShouldUpdate", this).call(this, nextNode);
     }
+  }, {
+    key: "subscribeToViewModeChange",
+    value: function subscribeToViewModeChange(domRef) {
+      var _this$reactComponentP2,
+        _this3 = this;
+      return (_this$reactComponentP2 = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP2 === void 0 || (_this$reactComponentP2 = _this$reactComponentP2.editorViewMode) === null || _this$reactComponentP2 === void 0 ? void 0 : _this$reactComponentP2.sharedState.onChange(function (viewModeState) {
+        var _viewModeState$nextSh;
+        _this3.updateDomRefContentEditable(domRef, (_viewModeState$nextSh = viewModeState.nextSharedState) === null || _viewModeState$nextSh === void 0 ? void 0 : _viewModeState$nextSh.mode);
+      });
+    }
+  }, {
+    key: "updateDomRefContentEditable",
+    value: function updateDomRefContentEditable(domRef, editorViewMode) {
+      var _this$reactComponentP3;
+      // if the editor is in view mode, we should not allow editing
+      if (editorViewMode === 'view') {
+        domRef.contentEditable = 'false';
+        return;
+      }
+
+      // if the editor is in edit mode, we should allow editing if the media options allow it
+      if ((_this$reactComponentP3 = this.reactComponentProps.mediaOptions) !== null && _this$reactComponentP3 !== void 0 && _this$reactComponentP3.allowMediaSingleEditable) {
+        // workaround Chrome bug in https://product-fabric.atlassian.net/browse/ED-5379
+        // see also: https://github.com/ProseMirror/prosemirror/issues/884
+        domRef.contentEditable = 'true';
+      }
+    }
   }, {
     key: "getNodeMediaId",
     value: function getNodeMediaId(node) {
@@ -702,10 +737,10 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "update",
     value: function update(node, decorations, _innerDecorations, isValidUpdate) {
-      var _this3 = this;
+      var _this4 = this;
       if (!isValidUpdate) {
         isValidUpdate = function isValidUpdate(currentNode, newNode) {
-          return _this3.getNodeMediaId(currentNode) === _this3.getNodeMediaId(newNode);
+          return _this4.getNodeMediaId(currentNode) === _this4.getNodeMediaId(newNode);
         };
       }
       return _get(_getPrototypeOf(MediaSingleNodeView.prototype), "update", this).call(this, node, decorations, _innerDecorations, isValidUpdate);
@@ -713,15 +748,15 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "render",
     value: function render(props, forwardRef) {
-      var _this4 = this;
-      var _this$reactComponentP = this.reactComponentProps,
-        eventDispatcher = _this$reactComponentP.eventDispatcher,
-        fullWidthMode = _this$reactComponentP.fullWidthMode,
-        providerFactory = _this$reactComponentP.providerFactory,
-        mediaOptions = _this$reactComponentP.mediaOptions,
-        dispatchAnalyticsEvent = _this$reactComponentP.dispatchAnalyticsEvent,
-        pluginInjectionApi = _this$reactComponentP.pluginInjectionApi,
-        editorAppearance = _this$reactComponentP.editorAppearance;
+      var _this5 = this;
+      var _this$reactComponentP4 = this.reactComponentProps,
+        eventDispatcher = _this$reactComponentP4.eventDispatcher,
+        fullWidthMode = _this$reactComponentP4.fullWidthMode,
+        providerFactory = _this$reactComponentP4.providerFactory,
+        mediaOptions = _this$reactComponentP4.mediaOptions,
+        dispatchAnalyticsEvent = _this$reactComponentP4.dispatchAnalyticsEvent,
+        pluginInjectionApi = _this$reactComponentP4.pluginInjectionApi,
+        editorAppearance = _this$reactComponentP4.editorAppearance;
 
       // getPos is a boolean for marks, since this is a node we know it must be a function
       var getPos = this.getPos;
@@ -733,12 +768,12 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
           return jsx(MediaSingleNodeWrapper, {
             pluginInjectionApi: pluginInjectionApi,
             contextIdentifierProvider: contextIdentifierProvider,
-            node: _this4.node,
+            node: _this5.node,
             getPos: getPos,
             mediaOptions: mediaOptions,
-            view: _this4.view,
+            view: _this5.view,
             fullWidthMode: fullWidthMode,
-            selected: _this4.isNodeSelected,
+            selected: _this5.isNodeSelected,
             eventDispatcher: eventDispatcher,
             dispatchAnalyticsEvent: dispatchAnalyticsEvent,
             forwardRef: forwardRef,
@@ -763,6 +798,12 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
       }
       return true;
     }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var _this$unsubscribeToVi;
+      (_this$unsubscribeToVi = this.unsubscribeToViewModeChange) === null || _this$unsubscribeToVi === void 0 || _this$unsubscribeToVi.call(this);
+    }
   }]);
   return MediaSingleNodeView;
 }(ReactNodeView);

package/dist/esm/toolbar/comments.js

@@ -4,6 +4,7 @@ import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { commentMessages as messages } from '@atlaskit/editor-common/media';
 import CommentIcon from '@atlaskit/icon/core/comment';
 import LegacyCommentIcon from '@atlaskit/icon/glyph/comment';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { CommentWithDotIcon } from './assets/commentWithDotIcon';
 import { getSelectedMediaSingle } from './utils';
 export var commentButton = function commentButton(intl, state, api) {
@@ -22,11 +23,12 @@ export var commentButton = function commentButton(intl, state, api) {
       var _api$annotation$actio = api.annotation.actions,
         showCommentForBlockNode = _api$annotation$actio.showCommentForBlockNode,
         setInlineCommentDraftState = _api$annotation$actio.setInlineCommentDraftState;
-      if (!showCommentForBlockNode(selectMediaNode, VIEW_METHOD.COMMENT_BUTTON)(state, dispatch)) {
+      var isOpeningMediaCommentFromToolbar = fg('confluence_frontend_media_scroll_fix') ? true : false;
+      if (!showCommentForBlockNode(selectMediaNode, VIEW_METHOD.COMMENT_BUTTON, isOpeningMediaCommentFromToolbar)(state, dispatch)) {
         var _selectMediaNode$attr;
         setInlineCommentDraftState(true,
         // TODO: might need to update to reflect it's from media floating toolbar
-        INPUT_METHOD.FLOATING_TB, 'block', (_selectMediaNode$attr = selectMediaNode.attrs) === null || _selectMediaNode$attr === void 0 ? void 0 : _selectMediaNode$attr.id)(state, dispatch);
+        INPUT_METHOD.FLOATING_TB, 'block', (_selectMediaNode$attr = selectMediaNode.attrs) === null || _selectMediaNode$attr === void 0 ? void 0 : _selectMediaNode$attr.id, isOpeningMediaCommentFromToolbar)(state, dispatch);
       }
     }
     return true;

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

@@ -50,11 +50,14 @@ declare class MediaSingleNodeView extends ReactNodeView<MediaSingleNodeViewProps
     lastOffsetLeft: number;
     forceViewUpdate: boolean;
     selectionType: number | null;
+    unsubscribeToViewModeChange: (() => void) | undefined;
     createDomRef(): HTMLElement;
     getContentDOM(): {
         dom: HTMLDivElement;
     };
     viewShouldUpdate(nextNode: PMNode): boolean;
+    subscribeToViewModeChange(domRef: HTMLElement): (() => void) | undefined;
+    updateDomRefContentEditable(domRef: HTMLElement, editorViewMode?: 'edit' | 'view'): void;
     checkAndUpdateSelectionType: () => import("@atlaskit/editor-common/utils").SelectedState | null;
     isNodeSelected: () => boolean;
     getNodeMediaId(node: PMNode): string | undefined;
@@ -62,6 +65,7 @@ declare class MediaSingleNodeView extends ReactNodeView<MediaSingleNodeViewProps
     update(node: PMNode, decorations: readonly Decoration[], _innerDecorations?: DecorationSource, isValidUpdate?: (currentNode: PMNode, newNode: PMNode) => boolean): boolean;
     render(props: MediaSingleNodeViewProps, forwardRef?: ForwardRef): jsx.JSX.Element;
     ignoreMutation(): boolean;
+    destroy(): void;
 }
 export declare const ReactMediaSingleNode: (portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, providerFactory: ProviderFactory, pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined, dispatchAnalyticsEvent?: DispatchAnalyticsEvent, mediaOptions?: MediaOptions) => (node: PMNode, view: EditorView, getPos: getPosHandler) => MediaSingleNodeView;
 export {};

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

@@ -50,11 +50,14 @@ declare class MediaSingleNodeView extends ReactNodeView<MediaSingleNodeViewProps
     lastOffsetLeft: number;
     forceViewUpdate: boolean;
     selectionType: number | null;
+    unsubscribeToViewModeChange: (() => void) | undefined;
     createDomRef(): HTMLElement;
     getContentDOM(): {
         dom: HTMLDivElement;
     };
     viewShouldUpdate(nextNode: PMNode): boolean;
+    subscribeToViewModeChange(domRef: HTMLElement): (() => void) | undefined;
+    updateDomRefContentEditable(domRef: HTMLElement, editorViewMode?: 'edit' | 'view'): void;
     checkAndUpdateSelectionType: () => import("@atlaskit/editor-common/utils").SelectedState | null;
     isNodeSelected: () => boolean;
     getNodeMediaId(node: PMNode): string | undefined;
@@ -62,6 +65,7 @@ declare class MediaSingleNodeView extends ReactNodeView<MediaSingleNodeViewProps
     update(node: PMNode, decorations: readonly Decoration[], _innerDecorations?: DecorationSource, isValidUpdate?: (currentNode: PMNode, newNode: PMNode) => boolean): boolean;
     render(props: MediaSingleNodeViewProps, forwardRef?: ForwardRef): jsx.JSX.Element;
     ignoreMutation(): boolean;
+    destroy(): void;
 }
 export declare const ReactMediaSingleNode: (portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, providerFactory: ProviderFactory, pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined, dispatchAnalyticsEvent?: DispatchAnalyticsEvent, mediaOptions?: MediaOptions) => (node: PMNode, view: EditorView, getPos: getPosHandler) => MediaSingleNodeView;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "1.40.0",
+	"version": "1.41.0",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -36,10 +36,10 @@
 		"@atlaskit/analytics-namespaced-context": "^6.12.0",
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/button": "^20.3.0",
-		"@atlaskit/editor-common": "^94.18.0",
+		"@atlaskit/editor-common": "^94.21.0",
 		"@atlaskit/editor-palette": "1.6.3",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
-		"@atlaskit/editor-plugin-annotation": "1.23.3",
+		"@atlaskit/editor-plugin-annotation": "1.24.0",
 		"@atlaskit/editor-plugin-decorations": "^1.3.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^2.1.0",
@@ -54,19 +54,19 @@
 		"@atlaskit/editor-tables": "^2.8.0",
 		"@atlaskit/form": "^10.5.0",
 		"@atlaskit/icon": "^22.24.0",
-		"@atlaskit/media-card": "^78.12.0",
-		"@atlaskit/media-client": "^28.2.0",
+		"@atlaskit/media-card": "^78.14.0",
+		"@atlaskit/media-client": "^28.3.0",
 		"@atlaskit/media-client-react": "^2.3.0",
 		"@atlaskit/media-common": "^11.7.0",
 		"@atlaskit/media-filmstrip": "^47.5.0",
 		"@atlaskit/media-picker": "^67.0.0",
-		"@atlaskit/media-ui": "^26.1.0",
-		"@atlaskit/media-viewer": "^49.3.0",
+		"@atlaskit/media-ui": "^26.2.0",
+		"@atlaskit/media-viewer": "^49.4.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/primitives": "^13.1.0",
+		"@atlaskit/primitives": "^13.2.0",
 		"@atlaskit/textfield": "^6.5.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.13.0",
+		"@atlaskit/tmp-editor-statsig": "^2.16.0",
 		"@atlaskit/tokens": "^2.2.0",
 		"@atlaskit/tooltip": "^18.9.0",
 		"@babel/runtime": "^7.0.0",
@@ -144,8 +144,14 @@
 		"platform-visual-refresh-icons": {
 			"type": "boolean"
 		},
+		"platform_editor_prevent_delete_image_in_view_mode": {
+			"type": "boolean"
+		},
 		"platform_editor_inline_resize_media_to_edge": {
 			"type": "boolean"
+		},
+		"confluence_frontend_media_scroll_fix": {
+			"type": "boolean"
 		}
 	},
 	"stricter": {