@atlaskit/editor-plugin-annotation 1.23.2 → 1.24.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-annotation
 
+## 1.24.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
+
+## 1.23.3
+
+### Patch Changes
+
+- [#158723](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/158723)
+  [`8ff5b01b0d37f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8ff5b01b0d37f) -
+  [ED-24682] Cleanup feature flag for commenting on media in the renderer
+
+  **@atlaskit/editor-plugin-media**: Add optional checks for the api in Comment Badges on media
+
+- Updated dependencies
+
 ## 1.23.2
 
 ### Patch Changes

package/dist/cjs/commands/index.js

@@ -112,10 +112,10 @@ var removeInlineCommentNearSelection = exports.removeInlineCommentNearSelection
     return true;
   };
 };
-var getDraftCommandAction = function getDraftCommandAction(drafting, targetType, targetNodeId, isCommentOnMediaOn, supportedBlockNodes) {
+var getDraftCommandAction = function getDraftCommandAction(drafting, targetType, targetNodeId, supportedBlockNodes, isOpeningMediaCommentFromToolbar) {
   return function (editorState) {
     // validate selection only when entering draft mode
-    if (drafting && (0, _utils.isSelectionValid)(editorState, isCommentOnMediaOn) !== _types2.AnnotationSelectionType.VALID) {
+    if (drafting && (0, _utils.isSelectionValid)(editorState) !== _types2.AnnotationSelectionType.VALID) {
       return false;
     }
     return {
@@ -124,9 +124,9 @@ var getDraftCommandAction = function getDraftCommandAction(drafting, targetType,
         drafting: drafting,
         editorState: editorState,
         targetType: targetType,
-        isCommentOnMediaOn: isCommentOnMediaOn,
         supportedBlockNodes: supportedBlockNodes,
-        targetNodeId: targetNodeId
+        targetNodeId: targetNodeId,
+        isOpeningMediaCommentFromToolbar: isOpeningMediaCommentFromToolbar
       }
     };
   };
@@ -138,7 +138,7 @@ var getDraftCommandAction = function getDraftCommandAction(drafting, targetType,
  */
 var showInlineCommentForBlockNode = exports.showInlineCommentForBlockNode = function showInlineCommentForBlockNode() {
   var supportedBlockNodes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  return function (node, viewMethod) {
+  return function (node, viewMethod, isOpeningMediaCommentFromToolbar) {
     return function (state, dispatch) {
       var pluginState = (0, _utils.getPluginState)(state);
       var annotation = state.schema.marks.annotation;
@@ -160,7 +160,8 @@ var showInlineCommentForBlockNode = exports.showInlineCommentForBlockNode = func
               type: _types.ACTIONS.SET_SELECTED_ANNOTATION,
               data: {
                 selectedAnnotations: unresolvedAnnotationMarks,
-                selectAnnotationMethod: viewMethod
+                selectAnnotationMethod: viewMethod,
+                isOpeningMediaCommentFromToolbar: isOpeningMediaCommentFromToolbar
               }
             }));
             return true;
@@ -176,9 +177,9 @@ var setInlineCommentDraftState = exports.setInlineCommentDraftState = function s
   return function (drafting) {
     var inputMethod = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _analytics.INPUT_METHOD.TOOLBAR;
     var targetType = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'inline';
-    var isCommentOnMediaOn = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-    var targetNodeId = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : undefined;
-    var commandAction = getDraftCommandAction(drafting, targetType, targetNodeId, isCommentOnMediaOn, supportedBlockNodes);
+    var targetNodeId = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : undefined;
+    var isOpeningMediaCommentFromToolbar = arguments.length > 4 ? arguments[4] : undefined;
+    var commandAction = getDraftCommandAction(drafting, targetType, targetNodeId, supportedBlockNodes, isOpeningMediaCommentFromToolbar);
     return (0, _pluginFactory.createCommand)(commandAction, _transform.default.handleDraftState(editorAnalyticsAPI)(drafting, inputMethod));
   };
 };

package/dist/cjs/plugin.js

@@ -92,7 +92,6 @@ var annotationPlugin = exports.annotationPlugin = function annotationPlugin(_ref
             state: state,
             intl: intl,
             isToolbarAbove: isToolbarAbove,
-            isCommentOnMediaOn: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMedia,
             api: api
           });
         }

package/dist/cjs/pm-plugins/plugin-factory.js

@@ -55,7 +55,6 @@ var shouldClearBookMarkCheck = exports.shouldClearBookMarkCheck = function shoul
 };
 var getSelectionChangedHandler = function getSelectionChangedHandler(reopenCommentView) {
   return function (tr, pluginState) {
-    var _pluginState$featureF;
     if (pluginState.skipSelectionHandling) {
       return _objectSpread(_objectSpread({}, pluginState), {}, {
         skipSelectionHandling: false
@@ -63,7 +62,7 @@ var getSelectionChangedHandler = function getSelectionChangedHandler(reopenComme
         isInlineCommentViewClosed: false
       });
     }
-    if ((_pluginState$featureF = pluginState.featureFlagsPluginState) !== null && _pluginState$featureF !== void 0 && _pluginState$featureF.commentsOnMedia &&
+    if (
     // If pluginState.selectedAnnotations is annotations of block node, i.e. when a new comment is created,
     // we keep it as it is so that we can show comment view component with the newly created comment
     (0, _utils2.isBlockNodeAnnotationsSelected)(tr.selection, pluginState.selectedAnnotations)) {
@@ -99,28 +98,25 @@ var _pluginFactory = (0, _utils.pluginFactory)(_utils2.inlineCommentPluginKey, _
     onDocChanged: handleDocChanged,
     mapping: function mapping(tr, pluginState, editorState) {
       var draftDecorationSet = pluginState.draftDecorationSet,
-        bookmark = pluginState.bookmark,
-        featureFlagsPluginState = pluginState.featureFlagsPluginState;
+        bookmark = pluginState.bookmark;
       var mappedDecorationSet = _view.DecorationSet.empty,
         mappedBookmark;
       var hasMappedDecorations = false;
       if (draftDecorationSet) {
         mappedDecorationSet = draftDecorationSet.map(tr.mapping, tr.doc);
       }
-      if (featureFlagsPluginState !== null && featureFlagsPluginState !== void 0 && featureFlagsPluginState.commentsOnMedia) {
-        hasMappedDecorations = mappedDecorationSet.find(undefined, undefined, function (spec) {
-          return Object.values(_utils2.decorationKey).includes(spec.key);
-        }).length > 0;
+      hasMappedDecorations = mappedDecorationSet.find(undefined, undefined, function (spec) {
+        return Object.values(_utils2.decorationKey).includes(spec.key);
+      }).length > 0;
 
-        // When changes to decoration target make decoration invalid (e.g. delete text, add mark to node),
-        // we need to reset bookmark to hide create component and to avoid invalid draft being published
-        // We only perform this change when document selection has changed.
-        if (!hasMappedDecorations && shouldClearBookMarkCheck(tr, editorState, bookmark)) {
-          return _objectSpread(_objectSpread({}, pluginState), {}, {
-            draftDecorationSet: mappedDecorationSet,
-            bookmark: undefined
-          });
-        }
+      // When changes to decoration target make decoration invalid (e.g. delete text, add mark to node),
+      // we need to reset bookmark to hide create component and to avoid invalid draft being published
+      // We only perform this change when document selection has changed.
+      if (!hasMappedDecorations && shouldClearBookMarkCheck(tr, editorState, bookmark)) {
+        return _objectSpread(_objectSpread({}, pluginState), {}, {
+          draftDecorationSet: mappedDecorationSet,
+          bookmark: undefined
+        });
       }
       if (bookmark) {
         mappedBookmark = bookmark.map(tr.mapping);

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

@@ -24,7 +24,7 @@ var _default = exports.default = function _default(pluginState, action) {
         mouseData: mouseData
       });
     case _types.ACTIONS.SET_INLINE_COMMENT_DRAFT_STATE:
-      return getNewDraftState(pluginState, action.data.drafting, action.data.editorState, action.data.targetType, action.data.isCommentOnMediaOn, action.data.supportedBlockNodes, action.data.targetNodeId);
+      return getNewDraftState(pluginState, action.data.drafting, action.data.editorState, action.data.targetType, action.data.supportedBlockNodes, action.data.targetNodeId, action.data.isOpeningMediaCommentFromToolbar);
     case _types.ACTIONS.INLINE_COMMENT_CLEAR_DIRTY_MARK:
       return _objectSpread(_objectSpread({}, pluginState), {}, {
         dirtyAnnotations: false,
@@ -33,7 +33,8 @@ var _default = exports.default = function _default(pluginState, action) {
     case _types.ACTIONS.CLOSE_COMPONENT:
       return _objectSpread(_objectSpread({}, pluginState), {}, {
         isInlineCommentViewClosed: true,
-        isDrafting: false
+        isDrafting: false,
+        isOpeningMediaCommentFromToolbar: false
       });
     case _types.ACTIONS.ADD_INLINE_COMMENT:
       var updatedPluginState = getNewDraftState(pluginState, action.data.drafting, action.data.editorState);
@@ -56,13 +57,14 @@ var _default = exports.default = function _default(pluginState, action) {
         selectedAnnotations: (0, _toConsumableArray2.default)(action.data.selectedAnnotations),
         selectAnnotationMethod: action.data.selectAnnotationMethod,
         skipSelectionHandling: true,
-        isInlineCommentViewClosed: false
+        isInlineCommentViewClosed: false,
+        isOpeningMediaCommentFromToolbar: action.data.isOpeningMediaCommentFromToolbar
       });
     default:
       return pluginState;
   }
 };
-function getNewDraftState(pluginState, drafting, editorState, targetType, isCommentOnMediaOn, supportedBlockNodes, targetNodeId) {
+function getNewDraftState(pluginState, drafting, editorState, targetType, supportedBlockNodes, targetNodeId, isOpeningMediaCommentFromToolbar) {
   var draftDecorationSet = pluginState.draftDecorationSet;
   if (!draftDecorationSet || !drafting) {
     draftDecorationSet = _view.DecorationSet.empty;
@@ -75,11 +77,12 @@ function getNewDraftState(pluginState, drafting, editorState, targetType, isComm
   newState.bookmark = undefined;
   if (drafting && editorState) {
     newState.bookmark = editorState.selection.getBookmark();
-    var _ref = isCommentOnMediaOn ? (0, _utils.resolveDraftBookmark)(editorState, newState.bookmark, supportedBlockNodes) : newState.bookmark.resolve(editorState.doc),
-      from = _ref.from,
-      to = _ref.to;
+    var _resolveDraftBookmark = (0, _utils.resolveDraftBookmark)(editorState, newState.bookmark, supportedBlockNodes),
+      from = _resolveDraftBookmark.from,
+      to = _resolveDraftBookmark.to;
     var draftDecoration = (0, _utils.addDraftDecoration)(from, to, targetType);
     newState.draftDecorationSet = draftDecorationSet.add(editorState.doc, [draftDecoration]);
   }
+  newState.isOpeningMediaCommentFromToolbar = isOpeningMediaCommentFromToolbar;
   return newState;
 }

package/dist/cjs/toolbar.js

@@ -55,13 +55,12 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(editorAnalyticsA
       intl = _ref2.intl,
       _ref2$isToolbarAbove = _ref2.isToolbarAbove,
       isToolbarAbove = _ref2$isToolbarAbove === void 0 ? false : _ref2$isToolbarAbove,
-      isCommentOnMediaOn = _ref2.isCommentOnMediaOn,
       _ref2$_supportedNodes = _ref2._supportedNodes,
       _supportedNodes = _ref2$_supportedNodes === void 0 ? [] : _ref2$_supportedNodes,
       api = _ref2.api;
     var schema = state.schema;
-    var selectionValid = (0, _utils2.isSelectionValid)(state, isCommentOnMediaOn);
-    var isMediaSelected = isCommentOnMediaOn && (0, _mediaSingle.currentMediaNodeWithPos)(state);
+    var selectionValid = (0, _utils2.isSelectionValid)(state);
+    var isMediaSelected = (0, _mediaSingle.currentMediaNodeWithPos)(state);
 
     // comments on media can only be added via media floating toolbar
     if (isMediaSelected || selectionValid === _types.AnnotationSelectionType.INVALID) {
@@ -108,9 +107,9 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(editorAnalyticsA
         }
 
         /* When a user selects a valid range of content that includes non-text inline node (e.g. media, mention, emoji, etc.)
-            * Attempt to fire a spotlight to guide the user to create an inline comment on the inline node.
+         * Attempt to fire a spotlight to guide the user to create an inline comment on the inline node.
          * The spotlight will only be displayed if the user is a valid EP audience and the feature flag is enabled.
-        */
+         */
         if (isNonTextInlineNodeInludedInComment && selectionValid === _types.AnnotationSelectionType.VALID && (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes_spotlight')) {
           var _api$engagementPlatfo3;
           api === null || api === void 0 || (_api$engagementPlatfo3 = api.engagementPlatform) === null || _api$engagementPlatfo3 === void 0 || _api$engagementPlatfo3.actions.startMessage('inline-comments-on-inline-node-spotlight');

package/dist/cjs/ui/InlineCommentView.js

@@ -48,7 +48,8 @@ function InlineCommentView(_ref) {
     bookmark = _ref2.bookmark,
     selectedAnnotations = _ref2.selectedAnnotations,
     annotations = _ref2.annotations,
-    isInlineCommentViewClosed = _ref2.isInlineCommentViewClosed;
+    isInlineCommentViewClosed = _ref2.isInlineCommentViewClosed,
+    isOpeningMediaCommentFromToolbar = _ref2.isOpeningMediaCommentFromToolbar;
   var annotationsList = (0, _utils3.getAllAnnotations)(editorView.state.doc);
   var selection = (0, _utils3.getSelectionPositions)(state, inlineCommentState);
   var position = findPosForDOM(selection);
@@ -104,7 +105,8 @@ function InlineCommentView(_ref) {
         (0, _commands.setInlineCommentDraftState)(editorAnalyticsAPI)(false)(editorView.state, editorView.dispatch);
         !editorView.hasFocus() && editorView.focus();
       },
-      inlineNodeTypes: inlineNodeTypes
+      inlineNodeTypes: inlineNodeTypes,
+      isOpeningMediaCommentFromToolbar: isOpeningMediaCommentFromToolbar
     }));
   }
 
@@ -165,6 +167,7 @@ function InlineCommentView(_ref) {
     },
     onClose: function onClose() {
       (0, _commands.closeComponent)()(editorView.state, editorView.dispatch);
-    }
+    },
+    isOpeningMediaCommentFromToolbar: isOpeningMediaCommentFromToolbar
   }));
 }

package/dist/cjs/utils.js

@@ -315,15 +315,15 @@ var getDraftCommandAnalyticsPayload = exports.getDraftCommandAnalyticsPayload =
   };
   return payload;
 };
-var isSelectionValid = exports.isSelectionValid = function isSelectionValid(state, isCommentOnMediaOn) {
+var isSelectionValid = exports.isSelectionValid = function isSelectionValid(state) {
   var _currentMediaNodeWith;
-  var _supportedNodes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  var _supportedNodes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var selection = state.selection;
   var _ref4 = getPluginState(state) || {},
     disallowOnWhitespace = _ref4.disallowOnWhitespace;
 
   // Allow media so that it can enter draft mode
-  if (isCommentOnMediaOn && (_currentMediaNodeWith = (0, _mediaSingle.currentMediaNodeWithPos)(state)) !== null && _currentMediaNodeWith !== void 0 && _currentMediaNodeWith.node) {
+  if ((_currentMediaNodeWith = (0, _mediaSingle.currentMediaNodeWithPos)(state)) !== null && _currentMediaNodeWith !== void 0 && _currentMediaNodeWith.node) {
     return _types.AnnotationSelectionType.VALID;
   }
   if (selection.empty || !(selection instanceof _state.TextSelection || selection instanceof _state.AllSelection)) {

package/dist/es2019/commands/index.js

@@ -94,10 +94,10 @@ export const removeInlineCommentNearSelection = (id, supportedNodes = []) => (st
   }
   return true;
 };
-const getDraftCommandAction = (drafting, targetType, targetNodeId, isCommentOnMediaOn, supportedBlockNodes) => {
+const getDraftCommandAction = (drafting, targetType, targetNodeId, supportedBlockNodes, isOpeningMediaCommentFromToolbar) => {
   return editorState => {
     // validate selection only when entering draft mode
-    if (drafting && isSelectionValid(editorState, isCommentOnMediaOn) !== AnnotationSelectionType.VALID) {
+    if (drafting && isSelectionValid(editorState) !== AnnotationSelectionType.VALID) {
       return false;
     }
     return {
@@ -106,9 +106,9 @@ const getDraftCommandAction = (drafting, targetType, targetNodeId, isCommentOnMe
         drafting,
         editorState,
         targetType,
-        isCommentOnMediaOn,
         supportedBlockNodes,
-        targetNodeId
+        targetNodeId,
+        isOpeningMediaCommentFromToolbar
       }
     };
   };
@@ -118,7 +118,7 @@ const getDraftCommandAction = (drafting, targetType, targetNodeId, isCommentOnMe
  * Show active inline comments for a given block node, otherwise,
  * return false if the node has no comments or no unresolved comments.
  */
-export const showInlineCommentForBlockNode = (supportedBlockNodes = []) => (node, viewMethod) => (state, dispatch) => {
+export const showInlineCommentForBlockNode = (supportedBlockNodes = []) => (node, viewMethod, isOpeningMediaCommentFromToolbar) => (state, dispatch) => {
   const pluginState = getPluginState(state);
   const {
     annotation
@@ -137,7 +137,8 @@ export const showInlineCommentForBlockNode = (supportedBlockNodes = []) => (node
           type: ACTIONS.SET_SELECTED_ANNOTATION,
           data: {
             selectedAnnotations: unresolvedAnnotationMarks,
-            selectAnnotationMethod: viewMethod
+            selectAnnotationMethod: viewMethod,
+            isOpeningMediaCommentFromToolbar
           }
         }));
         return true;
@@ -146,8 +147,8 @@ export const showInlineCommentForBlockNode = (supportedBlockNodes = []) => (node
   }
   return false;
 };
-export const setInlineCommentDraftState = (editorAnalyticsAPI, supportedBlockNodes = []) => (drafting, inputMethod = INPUT_METHOD.TOOLBAR, targetType = 'inline', isCommentOnMediaOn = false, targetNodeId = undefined) => {
-  const commandAction = getDraftCommandAction(drafting, targetType, targetNodeId, isCommentOnMediaOn, supportedBlockNodes);
+export const setInlineCommentDraftState = (editorAnalyticsAPI, supportedBlockNodes = []) => (drafting, inputMethod = INPUT_METHOD.TOOLBAR, targetType = 'inline', targetNodeId = undefined, isOpeningMediaCommentFromToolbar) => {
+  const commandAction = getDraftCommandAction(drafting, targetType, targetNodeId, supportedBlockNodes, isOpeningMediaCommentFromToolbar);
   return createCommand(commandAction, transform.handleDraftState(editorAnalyticsAPI)(drafting, inputMethod));
 };
 export const addInlineComment = (editorAnalyticsAPI, editorAPI) => (id, supportedBlockNodes) => {

package/dist/es2019/plugin.js

@@ -81,7 +81,6 @@ export const annotationPlugin = ({
             state,
             intl,
             isToolbarAbove,
-            isCommentOnMediaOn: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMedia,
             api
           });
         }

package/dist/es2019/pm-plugins/plugin-factory.js

@@ -45,7 +45,6 @@ export const shouldClearBookMarkCheck = (tr, editorState, bookmark) => {
   return true;
 };
 const getSelectionChangedHandler = reopenCommentView => (tr, pluginState) => {
-  var _pluginState$featureF;
   if (pluginState.skipSelectionHandling) {
     return {
       ...pluginState,
@@ -55,7 +54,7 @@ const getSelectionChangedHandler = reopenCommentView => (tr, pluginState) => {
       })
     };
   }
-  if ((_pluginState$featureF = pluginState.featureFlagsPluginState) !== null && _pluginState$featureF !== void 0 && _pluginState$featureF.commentsOnMedia &&
+  if (
   // If pluginState.selectedAnnotations is annotations of block node, i.e. when a new comment is created,
   // we keep it as it is so that we can show comment view component with the newly created comment
   isBlockNodeAnnotationsSelected(tr.selection, pluginState.selectedAnnotations)) {
@@ -102,8 +101,7 @@ export const {
   mapping: (tr, pluginState, editorState) => {
     let {
       draftDecorationSet,
-      bookmark,
-      featureFlagsPluginState
+      bookmark
     } = pluginState;
     let mappedDecorationSet = DecorationSet.empty,
       mappedBookmark;
@@ -111,19 +109,17 @@ export const {
     if (draftDecorationSet) {
       mappedDecorationSet = draftDecorationSet.map(tr.mapping, tr.doc);
     }
-    if (featureFlagsPluginState !== null && featureFlagsPluginState !== void 0 && featureFlagsPluginState.commentsOnMedia) {
-      hasMappedDecorations = mappedDecorationSet.find(undefined, undefined, spec => Object.values(decorationKey).includes(spec.key)).length > 0;
+    hasMappedDecorations = mappedDecorationSet.find(undefined, undefined, spec => Object.values(decorationKey).includes(spec.key)).length > 0;
 
-      // When changes to decoration target make decoration invalid (e.g. delete text, add mark to node),
-      // we need to reset bookmark to hide create component and to avoid invalid draft being published
-      // We only perform this change when document selection has changed.
-      if (!hasMappedDecorations && shouldClearBookMarkCheck(tr, editorState, bookmark)) {
-        return {
-          ...pluginState,
-          draftDecorationSet: mappedDecorationSet,
-          bookmark: undefined
-        };
-      }
+    // When changes to decoration target make decoration invalid (e.g. delete text, add mark to node),
+    // we need to reset bookmark to hide create component and to avoid invalid draft being published
+    // We only perform this change when document selection has changed.
+    if (!hasMappedDecorations && shouldClearBookMarkCheck(tr, editorState, bookmark)) {
+      return {
+        ...pluginState,
+        draftDecorationSet: mappedDecorationSet,
+        bookmark: undefined
+      };
     }
     if (bookmark) {
       mappedBookmark = bookmark.map(tr.mapping);

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

@@ -18,7 +18,7 @@ export default ((pluginState, action) => {
         mouseData
       };
     case ACTIONS.SET_INLINE_COMMENT_DRAFT_STATE:
-      return getNewDraftState(pluginState, action.data.drafting, action.data.editorState, action.data.targetType, action.data.isCommentOnMediaOn, action.data.supportedBlockNodes, action.data.targetNodeId);
+      return getNewDraftState(pluginState, action.data.drafting, action.data.editorState, action.data.targetType, action.data.supportedBlockNodes, action.data.targetNodeId, action.data.isOpeningMediaCommentFromToolbar);
     case ACTIONS.INLINE_COMMENT_CLEAR_DIRTY_MARK:
       return {
         ...pluginState,
@@ -29,7 +29,8 @@ export default ((pluginState, action) => {
       return {
         ...pluginState,
         isInlineCommentViewClosed: true,
-        isDrafting: false
+        isDrafting: false,
+        isOpeningMediaCommentFromToolbar: false
       };
     case ACTIONS.ADD_INLINE_COMMENT:
       const updatedPluginState = getNewDraftState(pluginState, action.data.drafting, action.data.editorState);
@@ -60,13 +61,14 @@ export default ((pluginState, action) => {
         selectedAnnotations: [...action.data.selectedAnnotations],
         selectAnnotationMethod: action.data.selectAnnotationMethod,
         skipSelectionHandling: true,
-        isInlineCommentViewClosed: false
+        isInlineCommentViewClosed: false,
+        isOpeningMediaCommentFromToolbar: action.data.isOpeningMediaCommentFromToolbar
       };
     default:
       return pluginState;
   }
 });
-function getNewDraftState(pluginState, drafting, editorState, targetType, isCommentOnMediaOn, supportedBlockNodes, targetNodeId) {
+function getNewDraftState(pluginState, drafting, editorState, targetType, supportedBlockNodes, targetNodeId, isOpeningMediaCommentFromToolbar) {
   let {
     draftDecorationSet
   } = pluginState;
@@ -85,9 +87,10 @@ function getNewDraftState(pluginState, drafting, editorState, targetType, isComm
     const {
       from,
       to
-    } = isCommentOnMediaOn ? resolveDraftBookmark(editorState, newState.bookmark, supportedBlockNodes) : newState.bookmark.resolve(editorState.doc);
+    } = resolveDraftBookmark(editorState, newState.bookmark, supportedBlockNodes);
     const draftDecoration = addDraftDecoration(from, to, targetType);
     newState.draftDecorationSet = draftDecorationSet.add(editorState.doc, [draftDecoration]);
   }
+  newState.isOpeningMediaCommentFromToolbar = isOpeningMediaCommentFromToolbar;
   return newState;
 }

package/dist/es2019/toolbar.js

@@ -45,15 +45,14 @@ export const buildToolbar = editorAnalyticsAPI => ({
   state,
   intl,
   isToolbarAbove = false,
-  isCommentOnMediaOn,
   _supportedNodes = [],
   api
 }) => {
   const {
     schema
   } = state;
-  const selectionValid = isSelectionValid(state, isCommentOnMediaOn);
-  const isMediaSelected = isCommentOnMediaOn && currentMediaNodeWithPos(state);
+  const selectionValid = isSelectionValid(state);
+  const isMediaSelected = currentMediaNodeWithPos(state);
 
   // comments on media can only be added via media floating toolbar
   if (isMediaSelected || selectionValid === AnnotationSelectionType.INVALID) {
@@ -98,9 +97,9 @@ export const buildToolbar = editorAnalyticsAPI => ({
       }
 
       /* When a user selects a valid range of content that includes non-text inline node (e.g. media, mention, emoji, etc.)
-          * Attempt to fire a spotlight to guide the user to create an inline comment on the inline node.
+       * Attempt to fire a spotlight to guide the user to create an inline comment on the inline node.
        * The spotlight will only be displayed if the user is a valid EP audience and the feature flag is enabled.
-      */
+       */
       if (isNonTextInlineNodeInludedInComment && selectionValid === AnnotationSelectionType.VALID && fg('editor_inline_comments_on_inline_nodes_spotlight')) {
         var _api$engagementPlatfo4;
         api === null || api === void 0 ? void 0 : (_api$engagementPlatfo4 = api.engagementPlatform) === null || _api$engagementPlatfo4 === void 0 ? void 0 : _api$engagementPlatfo4.actions.startMessage('inline-comments-on-inline-node-spotlight');

package/dist/es2019/ui/InlineCommentView.js

@@ -47,7 +47,8 @@ export function InlineCommentView({
     bookmark,
     selectedAnnotations,
     annotations,
-    isInlineCommentViewClosed
+    isInlineCommentViewClosed,
+    isOpeningMediaCommentFromToolbar
   } = inlineCommentState || {};
   const annotationsList = getAllAnnotations(editorView.state.doc);
   const selection = getSelectionPositions(state, inlineCommentState);
@@ -104,7 +105,8 @@ export function InlineCommentView({
         setInlineCommentDraftState(editorAnalyticsAPI)(false)(editorView.state, editorView.dispatch);
         !editorView.hasFocus() && editorView.focus();
       },
-      inlineNodeTypes: inlineNodeTypes
+      inlineNodeTypes: inlineNodeTypes,
+      isOpeningMediaCommentFromToolbar: isOpeningMediaCommentFromToolbar
     }));
   }
 
@@ -160,6 +162,7 @@ export function InlineCommentView({
     }, RESOLVE_METHOD.COMPONENT)(editorView.state, editorView.dispatch),
     onClose: () => {
       closeComponent()(editorView.state, editorView.dispatch);
-    }
+    },
+    isOpeningMediaCommentFromToolbar: isOpeningMediaCommentFromToolbar
   }));
 }

package/dist/es2019/utils.js

@@ -278,7 +278,7 @@ export const getDraftCommandAnalyticsPayload = (drafting, inputMethod) => {
   };
   return payload;
 };
-export const isSelectionValid = (state, isCommentOnMediaOn, _supportedNodes = []) => {
+export const isSelectionValid = (state, _supportedNodes = []) => {
   var _currentMediaNodeWith;
   const {
     selection
@@ -288,7 +288,7 @@ export const isSelectionValid = (state, isCommentOnMediaOn, _supportedNodes = []
   } = getPluginState(state) || {};
 
   // Allow media so that it can enter draft mode
-  if (isCommentOnMediaOn && (_currentMediaNodeWith = currentMediaNodeWithPos(state)) !== null && _currentMediaNodeWith !== void 0 && _currentMediaNodeWith.node) {
+  if ((_currentMediaNodeWith = currentMediaNodeWithPos(state)) !== null && _currentMediaNodeWith !== void 0 && _currentMediaNodeWith.node) {
     return AnnotationSelectionType.VALID;
   }
   if (selection.empty || !(selection instanceof TextSelection || selection instanceof AllSelection)) {

package/dist/esm/commands/index.js

@@ -105,10 +105,10 @@ export var removeInlineCommentNearSelection = function removeInlineCommentNearSe
     return true;
   };
 };
-var getDraftCommandAction = function getDraftCommandAction(drafting, targetType, targetNodeId, isCommentOnMediaOn, supportedBlockNodes) {
+var getDraftCommandAction = function getDraftCommandAction(drafting, targetType, targetNodeId, supportedBlockNodes, isOpeningMediaCommentFromToolbar) {
   return function (editorState) {
     // validate selection only when entering draft mode
-    if (drafting && isSelectionValid(editorState, isCommentOnMediaOn) !== AnnotationSelectionType.VALID) {
+    if (drafting && isSelectionValid(editorState) !== AnnotationSelectionType.VALID) {
       return false;
     }
     return {
@@ -117,9 +117,9 @@ var getDraftCommandAction = function getDraftCommandAction(drafting, targetType,
         drafting: drafting,
         editorState: editorState,
         targetType: targetType,
-        isCommentOnMediaOn: isCommentOnMediaOn,
         supportedBlockNodes: supportedBlockNodes,
-        targetNodeId: targetNodeId
+        targetNodeId: targetNodeId,
+        isOpeningMediaCommentFromToolbar: isOpeningMediaCommentFromToolbar
       }
     };
   };
@@ -131,7 +131,7 @@ var getDraftCommandAction = function getDraftCommandAction(drafting, targetType,
  */
 export var showInlineCommentForBlockNode = function showInlineCommentForBlockNode() {
   var supportedBlockNodes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  return function (node, viewMethod) {
+  return function (node, viewMethod, isOpeningMediaCommentFromToolbar) {
     return function (state, dispatch) {
       var pluginState = getPluginState(state);
       var annotation = state.schema.marks.annotation;
@@ -153,7 +153,8 @@ export var showInlineCommentForBlockNode = function showInlineCommentForBlockNod
               type: ACTIONS.SET_SELECTED_ANNOTATION,
               data: {
                 selectedAnnotations: unresolvedAnnotationMarks,
-                selectAnnotationMethod: viewMethod
+                selectAnnotationMethod: viewMethod,
+                isOpeningMediaCommentFromToolbar: isOpeningMediaCommentFromToolbar
               }
             }));
             return true;
@@ -169,9 +170,9 @@ export var setInlineCommentDraftState = function setInlineCommentDraftState(edit
   return function (drafting) {
     var inputMethod = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : INPUT_METHOD.TOOLBAR;
     var targetType = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'inline';
-    var isCommentOnMediaOn = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-    var targetNodeId = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : undefined;
-    var commandAction = getDraftCommandAction(drafting, targetType, targetNodeId, isCommentOnMediaOn, supportedBlockNodes);
+    var targetNodeId = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : undefined;
+    var isOpeningMediaCommentFromToolbar = arguments.length > 4 ? arguments[4] : undefined;
+    var commandAction = getDraftCommandAction(drafting, targetType, targetNodeId, supportedBlockNodes, isOpeningMediaCommentFromToolbar);
     return createCommand(commandAction, transform.handleDraftState(editorAnalyticsAPI)(drafting, inputMethod));
   };
 };

package/dist/esm/plugin.js

@@ -79,7 +79,6 @@ export var annotationPlugin = function annotationPlugin(_ref) {
             state: state,
             intl: intl,
             isToolbarAbove: isToolbarAbove,
-            isCommentOnMediaOn: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMedia,
             api: api
           });
         }

package/dist/esm/pm-plugins/plugin-factory.js

@@ -48,7 +48,6 @@ export var shouldClearBookMarkCheck = function shouldClearBookMarkCheck(tr, edit
 };
 var getSelectionChangedHandler = function getSelectionChangedHandler(reopenCommentView) {
   return function (tr, pluginState) {
-    var _pluginState$featureF;
     if (pluginState.skipSelectionHandling) {
       return _objectSpread(_objectSpread({}, pluginState), {}, {
         skipSelectionHandling: false
@@ -56,7 +55,7 @@ var getSelectionChangedHandler = function getSelectionChangedHandler(reopenComme
         isInlineCommentViewClosed: false
       });
     }
-    if ((_pluginState$featureF = pluginState.featureFlagsPluginState) !== null && _pluginState$featureF !== void 0 && _pluginState$featureF.commentsOnMedia &&
+    if (
     // If pluginState.selectedAnnotations is annotations of block node, i.e. when a new comment is created,
     // we keep it as it is so that we can show comment view component with the newly created comment
     isBlockNodeAnnotationsSelected(tr.selection, pluginState.selectedAnnotations)) {
@@ -92,28 +91,25 @@ var _pluginFactory = pluginFactory(inlineCommentPluginKey, reducer, {
     onDocChanged: handleDocChanged,
     mapping: function mapping(tr, pluginState, editorState) {
       var draftDecorationSet = pluginState.draftDecorationSet,
-        bookmark = pluginState.bookmark,
-        featureFlagsPluginState = pluginState.featureFlagsPluginState;
+        bookmark = pluginState.bookmark;
       var mappedDecorationSet = DecorationSet.empty,
         mappedBookmark;
       var hasMappedDecorations = false;
       if (draftDecorationSet) {
         mappedDecorationSet = draftDecorationSet.map(tr.mapping, tr.doc);
       }
-      if (featureFlagsPluginState !== null && featureFlagsPluginState !== void 0 && featureFlagsPluginState.commentsOnMedia) {
-        hasMappedDecorations = mappedDecorationSet.find(undefined, undefined, function (spec) {
-          return Object.values(decorationKey).includes(spec.key);
-        }).length > 0;
+      hasMappedDecorations = mappedDecorationSet.find(undefined, undefined, function (spec) {
+        return Object.values(decorationKey).includes(spec.key);
+      }).length > 0;
 
-        // When changes to decoration target make decoration invalid (e.g. delete text, add mark to node),
-        // we need to reset bookmark to hide create component and to avoid invalid draft being published
-        // We only perform this change when document selection has changed.
-        if (!hasMappedDecorations && shouldClearBookMarkCheck(tr, editorState, bookmark)) {
-          return _objectSpread(_objectSpread({}, pluginState), {}, {
-            draftDecorationSet: mappedDecorationSet,
-            bookmark: undefined
-          });
-        }
+      // When changes to decoration target make decoration invalid (e.g. delete text, add mark to node),
+      // we need to reset bookmark to hide create component and to avoid invalid draft being published
+      // We only perform this change when document selection has changed.
+      if (!hasMappedDecorations && shouldClearBookMarkCheck(tr, editorState, bookmark)) {
+        return _objectSpread(_objectSpread({}, pluginState), {}, {
+          draftDecorationSet: mappedDecorationSet,
+          bookmark: undefined
+        });
       }
       if (bookmark) {
         mappedBookmark = bookmark.map(tr.mapping);

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

@@ -17,7 +17,7 @@ export default (function (pluginState, action) {
         mouseData: mouseData
       });
     case ACTIONS.SET_INLINE_COMMENT_DRAFT_STATE:
-      return getNewDraftState(pluginState, action.data.drafting, action.data.editorState, action.data.targetType, action.data.isCommentOnMediaOn, action.data.supportedBlockNodes, action.data.targetNodeId);
+      return getNewDraftState(pluginState, action.data.drafting, action.data.editorState, action.data.targetType, action.data.supportedBlockNodes, action.data.targetNodeId, action.data.isOpeningMediaCommentFromToolbar);
     case ACTIONS.INLINE_COMMENT_CLEAR_DIRTY_MARK:
       return _objectSpread(_objectSpread({}, pluginState), {}, {
         dirtyAnnotations: false,
@@ -26,7 +26,8 @@ export default (function (pluginState, action) {
     case ACTIONS.CLOSE_COMPONENT:
       return _objectSpread(_objectSpread({}, pluginState), {}, {
         isInlineCommentViewClosed: true,
-        isDrafting: false
+        isDrafting: false,
+        isOpeningMediaCommentFromToolbar: false
       });
     case ACTIONS.ADD_INLINE_COMMENT:
       var updatedPluginState = getNewDraftState(pluginState, action.data.drafting, action.data.editorState);
@@ -49,13 +50,14 @@ export default (function (pluginState, action) {
         selectedAnnotations: _toConsumableArray(action.data.selectedAnnotations),
         selectAnnotationMethod: action.data.selectAnnotationMethod,
         skipSelectionHandling: true,
-        isInlineCommentViewClosed: false
+        isInlineCommentViewClosed: false,
+        isOpeningMediaCommentFromToolbar: action.data.isOpeningMediaCommentFromToolbar
       });
     default:
       return pluginState;
   }
 });
-function getNewDraftState(pluginState, drafting, editorState, targetType, isCommentOnMediaOn, supportedBlockNodes, targetNodeId) {
+function getNewDraftState(pluginState, drafting, editorState, targetType, supportedBlockNodes, targetNodeId, isOpeningMediaCommentFromToolbar) {
   var draftDecorationSet = pluginState.draftDecorationSet;
   if (!draftDecorationSet || !drafting) {
     draftDecorationSet = DecorationSet.empty;
@@ -68,11 +70,12 @@ function getNewDraftState(pluginState, drafting, editorState, targetType, isComm
   newState.bookmark = undefined;
   if (drafting && editorState) {
     newState.bookmark = editorState.selection.getBookmark();
-    var _ref = isCommentOnMediaOn ? resolveDraftBookmark(editorState, newState.bookmark, supportedBlockNodes) : newState.bookmark.resolve(editorState.doc),
-      from = _ref.from,
-      to = _ref.to;
+    var _resolveDraftBookmark = resolveDraftBookmark(editorState, newState.bookmark, supportedBlockNodes),
+      from = _resolveDraftBookmark.from,
+      to = _resolveDraftBookmark.to;
     var draftDecoration = addDraftDecoration(from, to, targetType);
     newState.draftDecorationSet = draftDecorationSet.add(editorState.doc, [draftDecoration]);
   }
+  newState.isOpeningMediaCommentFromToolbar = isOpeningMediaCommentFromToolbar;
   return newState;
 }

package/dist/esm/toolbar.js

@@ -48,13 +48,12 @@ export var buildToolbar = function buildToolbar(editorAnalyticsAPI) {
       intl = _ref2.intl,
       _ref2$isToolbarAbove = _ref2.isToolbarAbove,
       isToolbarAbove = _ref2$isToolbarAbove === void 0 ? false : _ref2$isToolbarAbove,
-      isCommentOnMediaOn = _ref2.isCommentOnMediaOn,
       _ref2$_supportedNodes = _ref2._supportedNodes,
       _supportedNodes = _ref2$_supportedNodes === void 0 ? [] : _ref2$_supportedNodes,
       api = _ref2.api;
     var schema = state.schema;
-    var selectionValid = isSelectionValid(state, isCommentOnMediaOn);
-    var isMediaSelected = isCommentOnMediaOn && currentMediaNodeWithPos(state);
+    var selectionValid = isSelectionValid(state);
+    var isMediaSelected = currentMediaNodeWithPos(state);
 
     // comments on media can only be added via media floating toolbar
     if (isMediaSelected || selectionValid === AnnotationSelectionType.INVALID) {
@@ -101,9 +100,9 @@ export var buildToolbar = function buildToolbar(editorAnalyticsAPI) {
         }
 
         /* When a user selects a valid range of content that includes non-text inline node (e.g. media, mention, emoji, etc.)
-            * Attempt to fire a spotlight to guide the user to create an inline comment on the inline node.
+         * Attempt to fire a spotlight to guide the user to create an inline comment on the inline node.
          * The spotlight will only be displayed if the user is a valid EP audience and the feature flag is enabled.
-        */
+         */
         if (isNonTextInlineNodeInludedInComment && selectionValid === AnnotationSelectionType.VALID && fg('editor_inline_comments_on_inline_nodes_spotlight')) {
           var _api$engagementPlatfo3;
           api === null || api === void 0 || (_api$engagementPlatfo3 = api.engagementPlatform) === null || _api$engagementPlatfo3 === void 0 || _api$engagementPlatfo3.actions.startMessage('inline-comments-on-inline-node-spotlight');

package/dist/esm/ui/InlineCommentView.js

@@ -41,7 +41,8 @@ export function InlineCommentView(_ref) {
     bookmark = _ref2.bookmark,
     selectedAnnotations = _ref2.selectedAnnotations,
     annotations = _ref2.annotations,
-    isInlineCommentViewClosed = _ref2.isInlineCommentViewClosed;
+    isInlineCommentViewClosed = _ref2.isInlineCommentViewClosed,
+    isOpeningMediaCommentFromToolbar = _ref2.isOpeningMediaCommentFromToolbar;
   var annotationsList = getAllAnnotations(editorView.state.doc);
   var selection = getSelectionPositions(state, inlineCommentState);
   var position = findPosForDOM(selection);
@@ -97,7 +98,8 @@ export function InlineCommentView(_ref) {
         setInlineCommentDraftState(editorAnalyticsAPI)(false)(editorView.state, editorView.dispatch);
         !editorView.hasFocus() && editorView.focus();
       },
-      inlineNodeTypes: inlineNodeTypes
+      inlineNodeTypes: inlineNodeTypes,
+      isOpeningMediaCommentFromToolbar: isOpeningMediaCommentFromToolbar
     }));
   }
 
@@ -158,6 +160,7 @@ export function InlineCommentView(_ref) {
     },
     onClose: function onClose() {
       closeComponent()(editorView.state, editorView.dispatch);
-    }
+    },
+    isOpeningMediaCommentFromToolbar: isOpeningMediaCommentFromToolbar
   }));
 }

package/dist/esm/utils.js

@@ -288,15 +288,15 @@ export var getDraftCommandAnalyticsPayload = function getDraftCommandAnalyticsPa
   };
   return payload;
 };
-export var isSelectionValid = function isSelectionValid(state, isCommentOnMediaOn) {
+export var isSelectionValid = function isSelectionValid(state) {
   var _currentMediaNodeWith;
-  var _supportedNodes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  var _supportedNodes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var selection = state.selection;
   var _ref4 = getPluginState(state) || {},
     disallowOnWhitespace = _ref4.disallowOnWhitespace;
 
   // Allow media so that it can enter draft mode
-  if (isCommentOnMediaOn && (_currentMediaNodeWith = currentMediaNodeWithPos(state)) !== null && _currentMediaNodeWith !== void 0 && _currentMediaNodeWith.node) {
+  if ((_currentMediaNodeWith = currentMediaNodeWithPos(state)) !== null && _currentMediaNodeWith !== void 0 && _currentMediaNodeWith.node) {
     return AnnotationSelectionType.VALID;
   }
   if (selection.empty || !(selection instanceof TextSelection || selection instanceof AllSelection)) {

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

@@ -13,8 +13,8 @@ export declare const removeInlineCommentNearSelection: (id: string, supportedNod
  * Show active inline comments for a given block node, otherwise,
  * return false if the node has no comments or no unresolved comments.
  */
-export declare const showInlineCommentForBlockNode: (supportedBlockNodes?: string[]) => (node: PMNode | null, viewMethod?: VIEW_METHOD) => Command;
-export declare const setInlineCommentDraftState: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, supportedBlockNodes?: string[]) => (drafting: boolean, inputMethod?: InlineCommentInputMethod, targetType?: TargetType, isCommentOnMediaOn?: boolean, targetNodeId?: string | undefined) => Command;
+export declare const showInlineCommentForBlockNode: (supportedBlockNodes?: string[]) => (node: PMNode | null, viewMethod?: VIEW_METHOD, isOpeningMediaCommentFromToolbar?: boolean) => Command;
+export declare const setInlineCommentDraftState: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, supportedBlockNodes?: string[]) => (drafting: boolean, inputMethod?: InlineCommentInputMethod, targetType?: TargetType, targetNodeId?: string | undefined, isOpeningMediaCommentFromToolbar?: boolean) => Command;
 export declare const addInlineComment: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, editorAPI?: ExtractInjectionAPI<AnnotationPlugin> | undefined) => (id: string, supportedBlockNodes?: string[]) => Command;
 export declare const updateMouseState: (mouseData: InlineCommentMouseData) => Command;
 export declare const setSelectedAnnotation: (id: string) => Command;

package/dist/types/commands/transform.d.ts

@@ -112,8 +112,8 @@ declare const _default: {
         }, import("@atlaskit/editor-plugin-engagement-platform").EngagementPlatformPluginConfig>>];
         actions: {
             stripNonExistingAnnotations: (slice: import("prosemirror-model").Slice, state: EditorState) => boolean | undefined;
-            setInlineCommentDraftState: (drafting: boolean, inputMethod: InlineCommentInputMethod, targetType?: import("../types").TargetType | undefined, isCommentOnMediaOn?: boolean | undefined, targetNodeId?: string | undefined) => import("@atlaskit/editor-common/types").Command;
-            showCommentForBlockNode: (node: import("prosemirror-model").Node | null, viewMethod?: import("@atlaskit/editor-common/analytics").VIEW_METHOD | undefined) => import("@atlaskit/editor-common/types").Command;
+            setInlineCommentDraftState: (drafting: boolean, inputMethod: InlineCommentInputMethod, targetType?: import("../types").TargetType | undefined, targetNodeId?: string | undefined, isOpeningMediaCommentFromToolbar?: boolean | undefined) => import("@atlaskit/editor-common/types").Command;
+            showCommentForBlockNode: (node: import("prosemirror-model").Node | null, viewMethod?: import("@atlaskit/editor-common/analytics").VIEW_METHOD | undefined, isOpeningMediaCommentFromToolbar?: boolean | undefined) => import("@atlaskit/editor-common/types").Command;
         };
     }> | undefined) => (id: string, supportedBlockNodes?: string[] | undefined) => (transaction: Transaction, state: EditorState) => Transaction;
     handleDraftState: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (drafting: boolean, method?: InlineCommentInputMethod) => (transaction: Transaction, state: EditorState) => Transaction;

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

@@ -1,6 +1,6 @@
 import type { EditorAnalyticsAPI, VIEW_METHOD } from '@atlaskit/editor-common/analytics';
 import type { Dispatch, EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
-import { type PortalProviderAPI } from '@atlaskit/editor-common/src/portal';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { FeatureFlags } from '@atlaskit/editor-common/types';
 import type { EditorState, SelectionBookmark } from '@atlaskit/editor-prosemirror/state';
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
@@ -38,9 +38,9 @@ export type InlineCommentAction = {
         drafting: boolean;
         editorState: EditorState;
         targetType?: TargetType;
-        isCommentOnMediaOn?: boolean;
         supportedBlockNodes?: string[];
         targetNodeId?: string;
+        isOpeningMediaCommentFromToolbar?: boolean;
     };
 } | {
     type: ACTIONS.INLINE_COMMENT_UPDATE_MOUSE_STATE;
@@ -69,6 +69,7 @@ export type InlineCommentAction = {
     data: {
         selectedAnnotations: AnnotationInfo[];
         selectAnnotationMethod?: VIEW_METHOD;
+        isOpeningMediaCommentFromToolbar?: boolean;
     };
 };
 export type InlineCommentPluginState = {
@@ -86,4 +87,5 @@ export type InlineCommentPluginState = {
     isDrafting: boolean;
     targetNodeId?: string;
     selectAnnotationMethod?: VIEW_METHOD;
+    isOpeningMediaCommentFromToolbar?: boolean;
 };

package/dist/types/toolbar.d.ts

@@ -11,5 +11,5 @@ interface BuildToolbarOptions {
     _supportedNodes?: string[];
     api?: ExtractInjectionAPI<AnnotationPlugin>;
 }
-export declare const buildToolbar: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => ({ state, intl, isToolbarAbove, isCommentOnMediaOn, _supportedNodes, api, }: BuildToolbarOptions) => FloatingToolbarConfig | undefined;
+export declare const buildToolbar: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => ({ state, intl, isToolbarAbove, _supportedNodes, api, }: BuildToolbarOptions) => FloatingToolbarConfig | undefined;
 export {};

package/dist/types/types.d.ts

@@ -23,9 +23,7 @@ export type TargetType = 'block' | 'inline';
 export type InlineCommentInputMethod = INPUT_METHOD.TOOLBAR | INPUT_METHOD.SHORTCUT | INPUT_METHOD.FLOATING_TB;
 type SetInlineCommentDraftState = (drafting: boolean, inputMethod: InlineCommentInputMethod, 
 /** @default 'inline' */
-targetType?: TargetType, 
-/** check for confluence.frontend.fabric.editor.comments-on-media feature flag */
-isCommentOnMediaOn?: boolean, targetNodeId?: string) => Command;
+targetType?: TargetType, targetNodeId?: string, isOpeningMediaCommentFromToolbar?: boolean) => Command;
 export type AnnotationPlugin = NextEditorPlugin<'annotation', {
     pluginConfiguration: AnnotationProviders | undefined;
     sharedState: InlineCommentPluginState | undefined;
@@ -71,6 +69,10 @@ export type InlineCommentCreateComponentProps = AnnotationComponentProps & {
     onCreate: (id: string) => void;
     /** List of inline node types, which are wrapped by the annotation. */
     inlineNodeTypes: string[] | undefined;
+    /**
+     * Indicates whether we're opening the media comment box from the media toolbar so we can scroll the media into view
+     */
+    isOpeningMediaCommentFromToolbar?: boolean;
 };
 export type InlineCommentViewComponentProps = AnnotationComponentProps & {
     /**
@@ -100,6 +102,10 @@ export type InlineCommentViewComponentProps = AnnotationComponentProps & {
      *        `editor_inline_comments_on_inline_nodes` is removed.
      */
     getInlineNodeTypes: (annotationId: string) => string[] | undefined;
+    /**
+     * Indicates whether we're opening the media comment box from the media toolbar so we can scroll the media into view
+     */
+    isOpeningMediaCommentFromToolbar?: boolean;
 };
 export interface AnnotationState<Type, State> {
     annotationType: Type;

package/dist/types/utils.d.ts

@@ -34,7 +34,7 @@ export declare const getPluginState: (state: EditorState) => InlineCommentPlugin
  * get payload for the open/close analytics event
  */
 export declare const getDraftCommandAnalyticsPayload: (drafting: boolean, inputMethod: InlineCommentInputMethod) => AnalyticsEventPayloadCallback;
-export declare const isSelectionValid: (state: EditorState, isCommentOnMediaOn?: boolean, _supportedNodes?: string[]) => AnnotationSelectionType;
+export declare const isSelectionValid: (state: EditorState, _supportedNodes?: string[]) => AnnotationSelectionType;
 export declare const hasInvalidNodes: (state: EditorState) => boolean;
 export declare const isSupportedBlockNode: (node: Node, supportedBlockNodes?: string[]) => boolean;
 /**

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

@@ -13,8 +13,8 @@ export declare const removeInlineCommentNearSelection: (id: string, supportedNod
  * Show active inline comments for a given block node, otherwise,
  * return false if the node has no comments or no unresolved comments.
  */
-export declare const showInlineCommentForBlockNode: (supportedBlockNodes?: string[]) => (node: PMNode | null, viewMethod?: VIEW_METHOD) => Command;
-export declare const setInlineCommentDraftState: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, supportedBlockNodes?: string[]) => (drafting: boolean, inputMethod?: InlineCommentInputMethod, targetType?: TargetType, isCommentOnMediaOn?: boolean, targetNodeId?: string | undefined) => Command;
+export declare const showInlineCommentForBlockNode: (supportedBlockNodes?: string[]) => (node: PMNode | null, viewMethod?: VIEW_METHOD, isOpeningMediaCommentFromToolbar?: boolean) => Command;
+export declare const setInlineCommentDraftState: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, supportedBlockNodes?: string[]) => (drafting: boolean, inputMethod?: InlineCommentInputMethod, targetType?: TargetType, targetNodeId?: string | undefined, isOpeningMediaCommentFromToolbar?: boolean) => Command;
 export declare const addInlineComment: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, editorAPI?: ExtractInjectionAPI<AnnotationPlugin> | undefined) => (id: string, supportedBlockNodes?: string[]) => Command;
 export declare const updateMouseState: (mouseData: InlineCommentMouseData) => Command;
 export declare const setSelectedAnnotation: (id: string) => Command;

package/dist/types-ts4.5/commands/transform.d.ts

@@ -134,8 +134,8 @@ declare const _default: {
         ];
         actions: {
             stripNonExistingAnnotations: (slice: import("prosemirror-model").Slice, state: EditorState) => boolean | undefined;
-            setInlineCommentDraftState: (drafting: boolean, inputMethod: InlineCommentInputMethod, targetType?: import("../types").TargetType | undefined, isCommentOnMediaOn?: boolean | undefined, targetNodeId?: string | undefined) => import("@atlaskit/editor-common/types").Command;
-            showCommentForBlockNode: (node: import("prosemirror-model").Node | null, viewMethod?: import("@atlaskit/editor-common/analytics").VIEW_METHOD | undefined) => import("@atlaskit/editor-common/types").Command;
+            setInlineCommentDraftState: (drafting: boolean, inputMethod: InlineCommentInputMethod, targetType?: import("../types").TargetType | undefined, targetNodeId?: string | undefined, isOpeningMediaCommentFromToolbar?: boolean | undefined) => import("@atlaskit/editor-common/types").Command;
+            showCommentForBlockNode: (node: import("prosemirror-model").Node | null, viewMethod?: import("@atlaskit/editor-common/analytics").VIEW_METHOD | undefined, isOpeningMediaCommentFromToolbar?: boolean | undefined) => import("@atlaskit/editor-common/types").Command;
         };
     }> | undefined) => (id: string, supportedBlockNodes?: string[] | undefined) => (transaction: Transaction, state: EditorState) => Transaction;
     handleDraftState: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (drafting: boolean, method?: InlineCommentInputMethod) => (transaction: Transaction, state: EditorState) => Transaction;

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

@@ -1,6 +1,6 @@
 import type { EditorAnalyticsAPI, VIEW_METHOD } from '@atlaskit/editor-common/analytics';
 import type { Dispatch, EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
-import { type PortalProviderAPI } from '@atlaskit/editor-common/src/portal';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { FeatureFlags } from '@atlaskit/editor-common/types';
 import type { EditorState, SelectionBookmark } from '@atlaskit/editor-prosemirror/state';
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
@@ -38,9 +38,9 @@ export type InlineCommentAction = {
         drafting: boolean;
         editorState: EditorState;
         targetType?: TargetType;
-        isCommentOnMediaOn?: boolean;
         supportedBlockNodes?: string[];
         targetNodeId?: string;
+        isOpeningMediaCommentFromToolbar?: boolean;
     };
 } | {
     type: ACTIONS.INLINE_COMMENT_UPDATE_MOUSE_STATE;
@@ -69,6 +69,7 @@ export type InlineCommentAction = {
     data: {
         selectedAnnotations: AnnotationInfo[];
         selectAnnotationMethod?: VIEW_METHOD;
+        isOpeningMediaCommentFromToolbar?: boolean;
     };
 };
 export type InlineCommentPluginState = {
@@ -86,4 +87,5 @@ export type InlineCommentPluginState = {
     isDrafting: boolean;
     targetNodeId?: string;
     selectAnnotationMethod?: VIEW_METHOD;
+    isOpeningMediaCommentFromToolbar?: boolean;
 };

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

@@ -11,5 +11,5 @@ interface BuildToolbarOptions {
     _supportedNodes?: string[];
     api?: ExtractInjectionAPI<AnnotationPlugin>;
 }
-export declare const buildToolbar: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => ({ state, intl, isToolbarAbove, isCommentOnMediaOn, _supportedNodes, api, }: BuildToolbarOptions) => FloatingToolbarConfig | undefined;
+export declare const buildToolbar: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => ({ state, intl, isToolbarAbove, _supportedNodes, api, }: BuildToolbarOptions) => FloatingToolbarConfig | undefined;
 export {};

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

@@ -23,9 +23,7 @@ export type TargetType = 'block' | 'inline';
 export type InlineCommentInputMethod = INPUT_METHOD.TOOLBAR | INPUT_METHOD.SHORTCUT | INPUT_METHOD.FLOATING_TB;
 type SetInlineCommentDraftState = (drafting: boolean, inputMethod: InlineCommentInputMethod, 
 /** @default 'inline' */
-targetType?: TargetType, 
-/** check for confluence.frontend.fabric.editor.comments-on-media feature flag */
-isCommentOnMediaOn?: boolean, targetNodeId?: string) => Command;
+targetType?: TargetType, targetNodeId?: string, isOpeningMediaCommentFromToolbar?: boolean) => Command;
 export type AnnotationPlugin = NextEditorPlugin<'annotation', {
     pluginConfiguration: AnnotationProviders | undefined;
     sharedState: InlineCommentPluginState | undefined;
@@ -71,6 +69,10 @@ export type InlineCommentCreateComponentProps = AnnotationComponentProps & {
     onCreate: (id: string) => void;
     /** List of inline node types, which are wrapped by the annotation. */
     inlineNodeTypes: string[] | undefined;
+    /**
+     * Indicates whether we're opening the media comment box from the media toolbar so we can scroll the media into view
+     */
+    isOpeningMediaCommentFromToolbar?: boolean;
 };
 export type InlineCommentViewComponentProps = AnnotationComponentProps & {
     /**
@@ -100,6 +102,10 @@ export type InlineCommentViewComponentProps = AnnotationComponentProps & {
      *        `editor_inline_comments_on_inline_nodes` is removed.
      */
     getInlineNodeTypes: (annotationId: string) => string[] | undefined;
+    /**
+     * Indicates whether we're opening the media comment box from the media toolbar so we can scroll the media into view
+     */
+    isOpeningMediaCommentFromToolbar?: boolean;
 };
 export interface AnnotationState<Type, State> {
     annotationType: Type;

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

@@ -34,7 +34,7 @@ export declare const getPluginState: (state: EditorState) => InlineCommentPlugin
  * get payload for the open/close analytics event
  */
 export declare const getDraftCommandAnalyticsPayload: (drafting: boolean, inputMethod: InlineCommentInputMethod) => AnalyticsEventPayloadCallback;
-export declare const isSelectionValid: (state: EditorState, isCommentOnMediaOn?: boolean, _supportedNodes?: string[]) => AnnotationSelectionType;
+export declare const isSelectionValid: (state: EditorState, _supportedNodes?: string[]) => AnnotationSelectionType;
 export declare const hasInvalidNodes: (state: EditorState) => boolean;
 export declare const isSupportedBlockNode: (node: Node, supportedBlockNodes?: string[]) => boolean;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-annotation",
-	"version": "1.23.2",
+	"version": "1.24.0",
 	"description": "Annotation plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -10,7 +10,7 @@
 	"atlassian": {
 		"team": "Editor: AI",
 		"singleton": true,
-		"runReact18": false
+		"runReact18": true
 	},
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"main": "dist/cjs/index.js",
@@ -32,16 +32,16 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^44.2.0",
-		"@atlaskit/editor-common": "^94.9.0",
+		"@atlaskit/editor-common": "^94.21.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
 		"@atlaskit/editor-plugin-editor-viewmode-effects": "^1.1.0",
 		"@atlaskit/editor-plugin-engagement-platform": "^2.1.0",
 		"@atlaskit/editor-plugin-feature-flags": "^1.2.0",
 		"@atlaskit/editor-prosemirror": "6.0.0",
 		"@atlaskit/icon": "^22.24.0",
-		"@atlaskit/onboarding": "^12.0.0",
+		"@atlaskit/onboarding": "^12.1.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/tmp-editor-statsig": "^2.10.0",
+		"@atlaskit/tmp-editor-statsig": "^2.16.0",
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {