@atlaskit/editor-plugin-annotation 1.23.3 → 1.24.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @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

package/dist/cjs/commands/index.js

@@ -112,7 +112,7 @@ var removeInlineCommentNearSelection = exports.removeInlineCommentNearSelection
     return true;
   };
 };
-var getDraftCommandAction = function getDraftCommandAction(drafting, targetType, targetNodeId, 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) !== _types2.AnnotationSelectionType.VALID) {
@@ -125,7 +125,8 @@ var getDraftCommandAction = function getDraftCommandAction(drafting, targetType,
         editorState: editorState,
         targetType: targetType,
         supportedBlockNodes: supportedBlockNodes,
-        targetNodeId: targetNodeId
+        targetNodeId: targetNodeId,
+        isOpeningMediaCommentFromToolbar: isOpeningMediaCommentFromToolbar
       }
     };
   };
@@ -137,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;
@@ -159,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,7 +178,8 @@ var setInlineCommentDraftState = exports.setInlineCommentDraftState = function s
     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 targetNodeId = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : undefined;
-    var commandAction = getDraftCommandAction(drafting, targetType, targetNodeId, supportedBlockNodes);
+    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/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.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, supportedBlockNodes, targetNodeId) {
+function getNewDraftState(pluginState, drafting, editorState, targetType, supportedBlockNodes, targetNodeId, isOpeningMediaCommentFromToolbar) {
   var draftDecorationSet = pluginState.draftDecorationSet;
   if (!draftDecorationSet || !drafting) {
     draftDecorationSet = _view.DecorationSet.empty;
@@ -81,5 +83,6 @@ function getNewDraftState(pluginState, drafting, editorState, targetType, suppor
     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

@@ -107,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/es2019/commands/index.js

@@ -94,7 +94,7 @@ export const removeInlineCommentNearSelection = (id, supportedNodes = []) => (st
   }
   return true;
 };
-const getDraftCommandAction = (drafting, targetType, targetNodeId, supportedBlockNodes) => {
+const getDraftCommandAction = (drafting, targetType, targetNodeId, supportedBlockNodes, isOpeningMediaCommentFromToolbar) => {
   return editorState => {
     // validate selection only when entering draft mode
     if (drafting && isSelectionValid(editorState) !== AnnotationSelectionType.VALID) {
@@ -107,7 +107,8 @@ const getDraftCommandAction = (drafting, targetType, targetNodeId, supportedBloc
         editorState,
         targetType,
         supportedBlockNodes,
-        targetNodeId
+        targetNodeId,
+        isOpeningMediaCommentFromToolbar
       }
     };
   };
@@ -117,7 +118,7 @@ const getDraftCommandAction = (drafting, targetType, targetNodeId, supportedBloc
  * 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
@@ -136,7 +137,8 @@ export const showInlineCommentForBlockNode = (supportedBlockNodes = []) => (node
           type: ACTIONS.SET_SELECTED_ANNOTATION,
           data: {
             selectedAnnotations: unresolvedAnnotationMarks,
-            selectAnnotationMethod: viewMethod
+            selectAnnotationMethod: viewMethod,
+            isOpeningMediaCommentFromToolbar
           }
         }));
         return true;
@@ -145,8 +147,8 @@ export const showInlineCommentForBlockNode = (supportedBlockNodes = []) => (node
   }
   return false;
 };
-export const setInlineCommentDraftState = (editorAnalyticsAPI, supportedBlockNodes = []) => (drafting, inputMethod = INPUT_METHOD.TOOLBAR, targetType = 'inline', targetNodeId = undefined) => {
-  const commandAction = getDraftCommandAction(drafting, targetType, targetNodeId, 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/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.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, supportedBlockNodes, targetNodeId) {
+function getNewDraftState(pluginState, drafting, editorState, targetType, supportedBlockNodes, targetNodeId, isOpeningMediaCommentFromToolbar) {
   let {
     draftDecorationSet
   } = pluginState;
@@ -89,5 +91,6 @@ function getNewDraftState(pluginState, drafting, editorState, targetType, suppor
     const draftDecoration = addDraftDecoration(from, to, targetType);
     newState.draftDecorationSet = draftDecorationSet.add(editorState.doc, [draftDecoration]);
   }
+  newState.isOpeningMediaCommentFromToolbar = isOpeningMediaCommentFromToolbar;
   return newState;
 }

package/dist/es2019/toolbar.js

@@ -97,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/esm/commands/index.js

@@ -105,7 +105,7 @@ export var removeInlineCommentNearSelection = function removeInlineCommentNearSe
     return true;
   };
 };
-var getDraftCommandAction = function getDraftCommandAction(drafting, targetType, targetNodeId, supportedBlockNodes) {
+var getDraftCommandAction = function getDraftCommandAction(drafting, targetType, targetNodeId, supportedBlockNodes, isOpeningMediaCommentFromToolbar) {
   return function (editorState) {
     // validate selection only when entering draft mode
     if (drafting && isSelectionValid(editorState) !== AnnotationSelectionType.VALID) {
@@ -118,7 +118,8 @@ var getDraftCommandAction = function getDraftCommandAction(drafting, targetType,
         editorState: editorState,
         targetType: targetType,
         supportedBlockNodes: supportedBlockNodes,
-        targetNodeId: targetNodeId
+        targetNodeId: targetNodeId,
+        isOpeningMediaCommentFromToolbar: isOpeningMediaCommentFromToolbar
       }
     };
   };
@@ -130,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;
@@ -152,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,7 +171,8 @@ export var setInlineCommentDraftState = function setInlineCommentDraftState(edit
     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 targetNodeId = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : undefined;
-    var commandAction = getDraftCommandAction(drafting, targetType, targetNodeId, supportedBlockNodes);
+    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/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.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, supportedBlockNodes, targetNodeId) {
+function getNewDraftState(pluginState, drafting, editorState, targetType, supportedBlockNodes, targetNodeId, isOpeningMediaCommentFromToolbar) {
   var draftDecorationSet = pluginState.draftDecorationSet;
   if (!draftDecorationSet || !drafting) {
     draftDecorationSet = DecorationSet.empty;
@@ -74,5 +76,6 @@ function getNewDraftState(pluginState, drafting, editorState, targetType, suppor
     var draftDecoration = addDraftDecoration(from, to, targetType);
     newState.draftDecorationSet = draftDecorationSet.add(editorState.doc, [draftDecoration]);
   }
+  newState.isOpeningMediaCommentFromToolbar = isOpeningMediaCommentFromToolbar;
   return newState;
 }

package/dist/esm/toolbar.js

@@ -100,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/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, 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, 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';
@@ -40,6 +40,7 @@ export type InlineCommentAction = {
         targetType?: TargetType;
         supportedBlockNodes?: string[];
         targetNodeId?: string;
+        isOpeningMediaCommentFromToolbar?: boolean;
     };
 } | {
     type: ACTIONS.INLINE_COMMENT_UPDATE_MOUSE_STATE;
@@ -68,6 +69,7 @@ export type InlineCommentAction = {
     data: {
         selectedAnnotations: AnnotationInfo[];
         selectAnnotationMethod?: VIEW_METHOD;
+        isOpeningMediaCommentFromToolbar?: boolean;
     };
 };
 export type InlineCommentPluginState = {
@@ -85,4 +87,5 @@ export type InlineCommentPluginState = {
     isDrafting: boolean;
     targetNodeId?: string;
     selectAnnotationMethod?: VIEW_METHOD;
+    isOpeningMediaCommentFromToolbar?: boolean;
 };

package/dist/types/types.d.ts

@@ -23,7 +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, targetNodeId?: string) => Command;
+targetType?: TargetType, targetNodeId?: string, isOpeningMediaCommentFromToolbar?: boolean) => Command;
 export type AnnotationPlugin = NextEditorPlugin<'annotation', {
     pluginConfiguration: AnnotationProviders | undefined;
     sharedState: InlineCommentPluginState | undefined;
@@ -69,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 & {
     /**
@@ -98,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/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, 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, 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';
@@ -40,6 +40,7 @@ export type InlineCommentAction = {
         targetType?: TargetType;
         supportedBlockNodes?: string[];
         targetNodeId?: string;
+        isOpeningMediaCommentFromToolbar?: boolean;
     };
 } | {
     type: ACTIONS.INLINE_COMMENT_UPDATE_MOUSE_STATE;
@@ -68,6 +69,7 @@ export type InlineCommentAction = {
     data: {
         selectedAnnotations: AnnotationInfo[];
         selectAnnotationMethod?: VIEW_METHOD;
+        isOpeningMediaCommentFromToolbar?: boolean;
     };
 };
 export type InlineCommentPluginState = {
@@ -85,4 +87,5 @@ export type InlineCommentPluginState = {
     isDrafting: boolean;
     targetNodeId?: string;
     selectAnnotationMethod?: VIEW_METHOD;
+    isOpeningMediaCommentFromToolbar?: boolean;
 };

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

@@ -23,7 +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, targetNodeId?: string) => Command;
+targetType?: TargetType, targetNodeId?: string, isOpeningMediaCommentFromToolbar?: boolean) => Command;
 export type AnnotationPlugin = NextEditorPlugin<'annotation', {
     pluginConfiguration: AnnotationProviders | undefined;
     sharedState: InlineCommentPluginState | undefined;
@@ -69,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 & {
     /**
@@ -98,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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-annotation",
-	"version": "1.23.3",
+	"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.11.0",
+		"@atlaskit/tmp-editor-statsig": "^2.16.0",
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {