@atlaskit/editor-plugin-media 10.0.10 → 10.1.0

package/dist/esm/ui/ImageBorder/index.js

@@ -89,12 +89,20 @@ var ImageBorder = function ImageBorder(_ref) {
       ref.style.left = "-".concat(rect.width, "px");
     }
   };
-  var handleTriggerByKeyboard = function handleTriggerByKeyboard(event, callback) {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      callback();
-      setIsOpenedByKeyboard(true);
+  var handleTriggerByKeyboard = function handleTriggerByKeyboard(event, allowedKeys, callback) {
+    if (!allowedKeys.includes(event.key)) {
+      return;
     }
+    event.preventDefault();
+    callback();
+    setIsOpenedByKeyboard(true);
+  };
+  var handleTriggerToolbarByKeyboard = function handleTriggerToolbarByKeyboard(event, callback) {
+    handleTriggerByKeyboard(event, ['Enter', ' '], callback);
+  };
+  var handleTriggerSubmenuByKeyboard = function handleTriggerSubmenuByKeyboard(event, callback) {
+    var keys = expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true) ? ['Enter', 'ArrowRight'] : ['Enter', ' '];
+    handleTriggerByKeyboard(event, keys, callback);
   };
   useEffect(function () {
     var focusFirstOption = function focusFirstOption(submenuRef, isOpen) {
@@ -141,8 +149,18 @@ var ImageBorder = function ImageBorder(_ref) {
       dropdownOptionButton,
       "aria-expanded": isColorSubmenuOpen,
       onKeyDown: function onKeyDown(e) {
-        return handleTriggerByKeyboard(e, function () {
-          return setIsColorSubmenuOpen(!isColorSubmenuOpen);
+        return handleTriggerSubmenuByKeyboard(e, function () {
+          if (expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+            setIsColorSubmenuOpen(function (prev) {
+              var next = !prev;
+              if (next) {
+                setIsSizeSubmenuOpen(false);
+              }
+              return next;
+            });
+          } else {
+            setIsColorSubmenuOpen(!isColorSubmenuOpen);
+          }
         });
       }
     }, jsx(Text, null, formatMessage(messages.borderColor)), jsx("div", {
@@ -157,20 +175,26 @@ var ImageBorder = function ImageBorder(_ref) {
       css: contextualSubMenu(0),
       ref: handleSubMenuRef
     }, jsx(ArrowKeyNavigationProvider, {
-      type: ArrowKeyNavigationType.MENU,
+      type: ArrowKeyNavigationType.MENU
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+      ,
       handleClose: function handleClose(e) {
         e.preventDefault();
         e.stopPropagation();
         handleColorSubmenuEsc();
       },
       disableCloseOnArrowClick: true
-    }, jsx(ColorPalette, {
+    }, jsx(ColorPalette
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    , {
       onClick: function onClick(color) {
         setBorder({
           color: color
         });
         setIsOpen(!isOpen);
-      },
+      }
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+      ,
       onKeyDown: function onKeyDown(color, _, event) {
         if (event.key === 'Enter' || event.key === ' ') {
           var _openDropdownButtonRe;
@@ -183,7 +207,9 @@ var ImageBorder = function ImageBorder(_ref) {
           (_openDropdownButtonRe = openDropdownButtonRef.current) === null || _openDropdownButtonRe === void 0 || _openDropdownButtonRe.focus();
         }
       },
-      selectedColor: color !== null && color !== void 0 ? color : null,
+      selectedColor: color !== null && color !== void 0 ? color : null
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+      ,
       paletteOptions: {
         palette: borderColorPalette,
         paletteColorTooltipMessages: borderPaletteTooltipMessages,
@@ -208,8 +234,18 @@ var ImageBorder = function ImageBorder(_ref) {
       "aria-expanded": isSizeSubmenuOpen,
       ref: dropDownSizeOptionButton,
       onKeyDown: function onKeyDown(e) {
-        return handleTriggerByKeyboard(e, function () {
-          return setIsSizeSubmenuOpen(!isSizeSubmenuOpen);
+        return handleTriggerSubmenuByKeyboard(e, function () {
+          if (expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+            setIsSizeSubmenuOpen(function (prev) {
+              var next = !prev;
+              if (next) {
+                setIsColorSubmenuOpen(false);
+              }
+              return next;
+            });
+          } else {
+            setIsSizeSubmenuOpen(!isSizeSubmenuOpen);
+          }
         });
       }
     }, jsx(Text, null, formatMessage(messages.borderSize)), jsx("div", {
@@ -219,7 +255,9 @@ var ImageBorder = function ImageBorder(_ref) {
       className: DropdownMenuSharedCssClassName.SUBMENU,
       ref: sizeSubmenuRef
     }, isSizeSubmenuOpen && jsx(ArrowKeyNavigationProvider, {
-      type: ArrowKeyNavigationType.MENU,
+      type: ArrowKeyNavigationType.MENU
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+      ,
       handleClose: function handleClose(e) {
         e.preventDefault();
         handleSizeSubmenuEsc();
@@ -332,13 +370,17 @@ var ImageBorder = function ImageBorder(_ref) {
       spacing: "spacious",
       label: "",
       size: "small"
-    }),
+    })
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
     onClick: function onClick() {
       setIsOpen(!isOpen);
       setIsOpenedByKeyboard(false);
-    },
+    }
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
     onKeyDown: function onKeyDown(e) {
-      return handleTriggerByKeyboard(e, function () {
+      return handleTriggerToolbarByKeyboard(e, function () {
         return setIsOpen(!isOpen);
       });
     }
@@ -349,12 +391,17 @@ var ImageBorder = function ImageBorder(_ref) {
     forcePlacement: true,
     stick: true
   }, jsx("div", {
-    /* eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */
+    onMouseLeave: expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true) ? undefined : function () {
+      setIsColorSubmenuOpen(false);
+      setIsSizeSubmenuOpen(false);
+    }
+    /* eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */,
     css: dropdownWrapper
   }, jsx(DropdownMenu
   //This needs be removed when the a11y is completely handled
   //Disabling key navigation now as it works only partially
   //Same with packages/editor/editor-plugin-table/src/plugins/table/ui/FloatingContextualMenu/ContextualMenu.tsx
+  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
   , {
     arrowKeyNavigationProviderOptions: {
       type: ArrowKeyNavigationType.MENU,
@@ -366,47 +413,83 @@ var ImageBorder = function ImageBorder(_ref) {
     } : function () {
       var _openDropdownButtonRe3;
       (_openDropdownButtonRe3 = openDropdownButtonRef.current) === null || _openDropdownButtonRe3 === void 0 || _openDropdownButtonRe3.focus();
-    },
+    }
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
     items: [{
       items: items
     }],
-    isOpen: isOpen,
+    isOpen: isOpen
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
     shouldFocusFirstItem: function shouldFocusFirstItem() {
       return isOpenByKeyboard;
-    },
+    }
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
     onOpenChange: function onOpenChange() {
       setIsOpen(false);
       setIsColorSubmenuOpen(false);
       setIsSizeSubmenuOpen(false);
       setIsOpenedByKeyboard(false);
-    },
+    }
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
     onItemActivated: function onItemActivated(_ref3) {
       var item = _ref3.item;
       if (item.value.name === 'color') {
-        setIsColorSubmenuOpen(!isColorSubmenuOpen);
+        if (expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+          setIsColorSubmenuOpen(function (prev) {
+            var next = !prev;
+            if (next) {
+              setIsSizeSubmenuOpen(false);
+            }
+            return next;
+          });
+        } else {
+          setIsColorSubmenuOpen(!isColorSubmenuOpen);
+        }
       }
       if (item.value.name === 'size') {
-        setIsSizeSubmenuOpen(!isSizeSubmenuOpen);
+        if (expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+          setIsSizeSubmenuOpen(function (prev) {
+            var next = !prev;
+            if (next) {
+              setIsColorSubmenuOpen(false);
+            }
+            return next;
+          });
+        } else {
+          setIsSizeSubmenuOpen(!isSizeSubmenuOpen);
+        }
       }
-    },
+    }
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
     onMouseEnter: function onMouseEnter(_ref4) {
       var item = _ref4.item;
-      if (item.value.name === 'color') {
-        setIsColorSubmenuOpen(true);
-        setIsOpenedByKeyboard(false);
-      }
-      if (item.value.name === 'size') {
-        setIsSizeSubmenuOpen(true);
-        setIsOpenedByKeyboard(false);
+      if (!expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+        if (item.value.name === 'color') {
+          setIsColorSubmenuOpen(true);
+          setIsOpenedByKeyboard(false);
+        }
+        if (item.value.name === 'size') {
+          setIsSizeSubmenuOpen(true);
+          setIsOpenedByKeyboard(false);
+        }
       }
-    },
+    }
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
     onMouseLeave: function onMouseLeave(_ref5) {
       var item = _ref5.item;
-      if (item.value.name === 'color') {
-        setIsColorSubmenuOpen(false);
-      }
-      if (item.value.name === 'size') {
-        setIsSizeSubmenuOpen(false);
+      if (!expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+        if (item.value.name === 'color') {
+          setIsColorSubmenuOpen(false);
+        }
+        if (item.value.name === 'size') {
+          setIsSizeSubmenuOpen(false);
+        }
       }
     },
     fitWidth: fitWidth + fitTolerance,

package/dist/esm/ui/MediaLinkingToolbar.js

@@ -122,13 +122,17 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
           icon: jsx(ChevronLeftLargeIcon, {
             label: formatLinkAddressText,
             size: "small"
-          }),
+          })
+          // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+          ,
           onClick: function onClick() {
             return _this.handleOnBack({
               url: value,
               inputMethod: currentInputMethod
             });
-          },
+          }
+          // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+          ,
           onKeyDown: function onKeyDown(event) {
             if (event.key === 'Enter' || event.key === ' ') {
               event.preventDefault();
@@ -145,7 +149,9 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
           placeholder: getPlaceholder(!!activityProvider),
           autoFocus: true,
           onCancel: _this.handleCancel,
-          defaultValue: value,
+          defaultValue: value
+          // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+          ,
           onSubmit: function onSubmit(inputValue) {
             var validationErrors = _this.getValidationErrors(inputValue, currentInputMethod);
             _this.setState({
@@ -154,7 +160,9 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
             if (!validationErrors.length) {
               _onSubmit();
             }
-          },
+          }
+          // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+          ,
           onChange: function onChange(value) {
             _this.setState({
               validationErrors: []
@@ -171,10 +179,14 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
           title: formatUnlinkText,
           icon: jsx(EditorUnlinkIcon, {
             label: formatUnlinkText
-          }),
+          })
+          // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+          ,
           onClick: function onClick() {
             return _this.handleUnlink();
-          },
+          }
+          // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+          ,
           onKeyDown: function onKeyDown(event) {
             if (event.key === 'Enter' || event.key === ' ') {
               event.preventDefault();

package/dist/esm/ui/MediaPicker/DropzoneWrapper.js

@@ -41,10 +41,14 @@ var DropzoneWrapperInternal = function DropzoneWrapperInternal(_ref) {
     config: dropzoneConfig,
     onError: pickerFacadeInstance.handleUploadError,
     onPreviewUpdate: pickerFacadeInstance.handleUploadPreviewUpdate,
-    onEnd: pickerFacadeInstance.handleReady,
+    onEnd: pickerFacadeInstance.handleReady
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+    ,
     onDragEnter: function onDragEnter() {
       return handleDrag === null || handleDrag === void 0 ? void 0 : handleDrag('enter');
-    },
+    }
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+    ,
     onDragLeave: function onDragLeave() {
       return handleDrag === null || handleDrag === void 0 ? void 0 : handleDrag('leave');
     },

package/dist/esm/ui/MediaPicker/PickerFacadeProvider.js

@@ -108,6 +108,7 @@ export default function PickerFacadeProvider(_ref) {
   }(), [analyticsName, insertFile, mediaOptions, options === null || options === void 0 ? void 0 : options.errorReporter]);
   useEffect(function () {
     if (mediaProvider) {
+      // eslint-disable-next-line @atlassian/perf-linting/no-chain-state-updates -- Ignored via go/ees017 (to be fixed)
       handleMediaProvider('mediaProvider', Promise.resolve(mediaProvider));
     }
   }, [mediaProvider, handleMediaProvider]);

package/dist/esm/ui/MediaViewer/MediaViewerContainer.js

@@ -26,6 +26,7 @@ export var MediaViewerContainer = function MediaViewerContainer(_ref) {
     isSelected = _ref$isSelected === void 0 ? true : _ref$isSelected,
     _ref$isInline = _ref.isInline,
     isInline = _ref$isInline === void 0 ? false : _ref$isInline,
+    mediaViewerExtensions = _ref.mediaViewerExtensions,
     children = _ref.children;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -56,6 +57,7 @@ export var MediaViewerContainer = function MediaViewerContainer(_ref) {
   }, children), shouldShowViewer && jsx(RenderMediaViewer, {
     selectedNodeAttrs: selectedNodeAttrs,
     mediaClientConfig: mediaClientConfig,
-    onClose: closeMediaViewer
+    onClose: closeMediaViewer,
+    extensions: mediaViewerExtensions
   })) : children);
 };

package/dist/esm/ui/MediaViewer/PortalWrapper.js

@@ -24,7 +24,8 @@ export var RenderMediaViewer = function RenderMediaViewer(_ref) {
     onClose = _ref.onClose,
     selectedNodeAttrs = _ref.selectedNodeAttrs,
     _ref$items = _ref.items,
-    items = _ref$items === void 0 ? [] : _ref$items;
+    items = _ref$items === void 0 ? [] : _ref$items,
+    extensions = _ref.extensions;
   var identifier = getIdentifier(selectedNodeAttrs);
   var collectionName = isExternalMedia(selectedNodeAttrs) ? '' : selectedNodeAttrs.collection;
   return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
@@ -35,6 +36,7 @@ export var RenderMediaViewer = function RenderMediaViewer(_ref) {
     ,
     mediaClientConfig: mediaClientConfig,
     selectedItem: identifier,
-    onClose: onClose
+    onClose: onClose,
+    extensions: extensions
   }), document.body);
 };

package/dist/esm/ui/ResizableMediaSingle/index.js

@@ -430,6 +430,7 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
         // when cursor is located below a media with caption,
         // press “Up“ key will result cursor focus on an invalid position, (on the resize handler)
         // This workaround adds an empty div inside the resize handler to prevent the issue.
+        // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
         ,
         handleComponentFunc: function handleComponentFunc() {
           return jsx("div", {

package/dist/esm/ui/toolbar/index.js

@@ -296,11 +296,15 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         var dispatch = editorView.dispatch,
           state = editorView.state;
         var borderMark = currentMediaOrInlineNodeBorderMark(state);
-        return /*#__PURE__*/React.createElement(ImageBorderItem, {
+        return /*#__PURE__*/React.createElement(ImageBorderItem
+        // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+        , {
           toggleBorder: function toggleBorder() {
             var _pluginInjectionApi$a;
             toggleBorderMark(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(state, dispatch);
-          },
+          }
+          // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+          ,
           setBorder: function setBorder(attrs) {
             var _pluginInjectionApi$a2;
             setBorderMark(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions)(attrs)(state, dispatch);

package/dist/esm/ui/toolbar/layout-group.js

@@ -42,7 +42,9 @@ export var LayoutGroup = function LayoutGroup(_ref) {
           }) : undefined,
           title: item.title,
           selected: item.selected,
-          disabled: item.disabled,
+          disabled: item.disabled
+          // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+          ,
           onClick: function onClick() {
             dispatchCommand(item.onClick);
             hide();

package/dist/esm/ui/toolbar/linking.js

@@ -67,12 +67,16 @@ export var getLinkingToolbar = function getLinkingToolbar(toolbarBaseConfig, med
               displayUrl: link,
               providerFactory: providerFactory,
               intl: intl,
-              editing: editing,
+              editing: editing
+              // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+              ,
               onUnlink: function onUnlink(setFocus) {
                 var _pluginInjectionApi$a;
                 unlink(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(view.state, view.dispatch, view);
                 setFocusOnFloatingToolbar(setFocus);
-              },
+              }
+              // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+              ,
               onBack: function onBack(href, meta, setFocus) {
                 if (href.trim() && meta.inputMethod) {
                   var _pluginInjectionApi$a2;
@@ -80,7 +84,9 @@ export var getLinkingToolbar = function getLinkingToolbar(toolbarBaseConfig, med
                 }
                 hideLinkingToolbar(view.state, view.dispatch, view);
                 setFocusOnFloatingToolbar(setFocus);
-              },
+              }
+              // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+              ,
               onCancel: function onCancel() {
                 var _pluginInjectionApi$f2;
                 hideLinkingToolbar(view.state, view.dispatch, view, true);
@@ -92,13 +98,17 @@ export var getLinkingToolbar = function getLinkingToolbar(toolbarBaseConfig, med
                 var selector = areToolbarFlagsEnabled(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar)) ? FORCE_FOCUS_SELECTOR_EDITOR_CONTROLS : FORCE_FOCUS_SELECTOR;
                 pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 || (_pluginInjectionApi$f2 = _pluginInjectionApi$f2.actions) === null || _pluginInjectionApi$f2 === void 0 || _pluginInjectionApi$f2.forceFocusSelector(selector)(tr);
                 dispatch(tr);
-              },
+              }
+              // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+              ,
               onSubmit: function onSubmit(href, meta) {
                 var _pluginInjectionApi$a3;
                 setUrlToMedia(href, meta.inputMethod, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions)(view.state, view.dispatch, view);
                 hideLinkingToolbar(view.state, view.dispatch, view);
                 setFocusOnFloatingToolbar(true);
-              },
+              }
+              // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+              ,
               onBlur: function onBlur() {
                 hideLinkingToolbar(view.state, view.dispatch, view);
               },

package/dist/esm/ui/toolbar/mediaInline.js

@@ -195,11 +195,15 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
         var dispatch = editorView.dispatch,
           state = editorView.state;
         var borderMark = currentMediaOrInlineNodeBorderMark(state);
-        return /*#__PURE__*/React.createElement(ImageBorderItem, {
+        return /*#__PURE__*/React.createElement(ImageBorderItem
+        // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+        , {
           toggleBorder: function toggleBorder() {
             var _pluginInjectionApi$a2;
             toggleBorderMark(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions)(state, dispatch);
-          },
+          }
+          // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+          ,
           setBorder: function setBorder(attrs) {
             var _pluginInjectionApi$a3;
             setBorderMark(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions)(attrs)(state, dispatch);

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

@@ -9,6 +9,7 @@ import type { FileIdentifier } from '@atlaskit/media-client';
 import type { MediaFeatureFlags } from '@atlaskit/media-common';
 import type { MediaClientConfig } from '@atlaskit/media-core';
 import type { MediaFile, UploadParams } from '@atlaskit/media-picker/types';
+import type { MediaViewerExtensions } from '@atlaskit/media-viewer';
 interface PlaceholderTextOptions {
     allowInserting?: boolean;
 }
@@ -91,6 +92,8 @@ export interface MediaPluginOptions {
      */
     isExternalMediaUploadDisabled?: boolean;
     mediaShallowCopyScope?: MediaCopyScope;
+    /** Extensions for the media viewer header (e.g. comment navigation button). */
+    mediaViewerExtensions?: MediaViewerExtensions;
     onCommentButtonMount?: () => void;
     /**
      * When enabled, prevents automatic focus/selection of media nodes after upload completion.

package/dist/types/ui/MediaViewer/MediaViewerContainer.d.ts

@@ -6,6 +6,7 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { MediaClientConfig } from '@atlaskit/media-core/auth';
+import type { MediaViewerExtensions } from '@atlaskit/media-viewer';
 type MediaViewerContainerProps = {
     children?: React.ReactNode;
     isEditorViewMode?: boolean;
@@ -13,7 +14,8 @@ type MediaViewerContainerProps = {
     isSelected?: boolean;
     mediaClientConfig: MediaClientConfig;
     mediaNode: PMNode;
+    mediaViewerExtensions?: MediaViewerExtensions;
     selectedMediaContainerNode: () => PMNode | undefined;
 };
-export declare const MediaViewerContainer: ({ mediaNode, selectedMediaContainerNode, mediaClientConfig, isEditorViewMode, isSelected, isInline, children, }: MediaViewerContainerProps) => jsx.JSX.Element;
+export declare const MediaViewerContainer: ({ mediaNode, selectedMediaContainerNode, mediaClientConfig, isEditorViewMode, isSelected, isInline, mediaViewerExtensions, children, }: MediaViewerContainerProps) => jsx.JSX.Element;
 export {};

package/dist/types/ui/MediaViewer/PortalWrapper.d.ts

@@ -1,11 +1,13 @@
 import React from 'react';
 import type { MediaADFAttrs } from '@atlaskit/adf-schema';
 import type { Identifier, MediaClientConfig } from '@atlaskit/media-client';
+import { type MediaViewerExtensions } from '@atlaskit/media-viewer';
 interface RenderMediaViewerProps {
+    extensions?: MediaViewerExtensions;
     items?: Identifier[];
     mediaClientConfig: MediaClientConfig;
     onClose: () => void;
     selectedNodeAttrs: MediaADFAttrs;
 }
-export declare const RenderMediaViewer: ({ mediaClientConfig, onClose, selectedNodeAttrs, items, }: RenderMediaViewerProps) => React.ReactPortal;
+export declare const RenderMediaViewer: ({ mediaClientConfig, onClose, selectedNodeAttrs, items, extensions, }: RenderMediaViewerProps) => React.ReactPortal;
 export {};

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

@@ -9,6 +9,7 @@ import type { FileIdentifier } from '@atlaskit/media-client';
 import type { MediaFeatureFlags } from '@atlaskit/media-common';
 import type { MediaClientConfig } from '@atlaskit/media-core';
 import type { MediaFile, UploadParams } from '@atlaskit/media-picker/types';
+import type { MediaViewerExtensions } from '@atlaskit/media-viewer';
 interface PlaceholderTextOptions {
     allowInserting?: boolean;
 }
@@ -91,6 +92,8 @@ export interface MediaPluginOptions {
      */
     isExternalMediaUploadDisabled?: boolean;
     mediaShallowCopyScope?: MediaCopyScope;
+    /** Extensions for the media viewer header (e.g. comment navigation button). */
+    mediaViewerExtensions?: MediaViewerExtensions;
     onCommentButtonMount?: () => void;
     /**
      * When enabled, prevents automatic focus/selection of media nodes after upload completion.

package/dist/types-ts4.5/ui/MediaViewer/MediaViewerContainer.d.ts

@@ -6,6 +6,7 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { MediaClientConfig } from '@atlaskit/media-core/auth';
+import type { MediaViewerExtensions } from '@atlaskit/media-viewer';
 type MediaViewerContainerProps = {
     children?: React.ReactNode;
     isEditorViewMode?: boolean;
@@ -13,7 +14,8 @@ type MediaViewerContainerProps = {
     isSelected?: boolean;
     mediaClientConfig: MediaClientConfig;
     mediaNode: PMNode;
+    mediaViewerExtensions?: MediaViewerExtensions;
     selectedMediaContainerNode: () => PMNode | undefined;
 };
-export declare const MediaViewerContainer: ({ mediaNode, selectedMediaContainerNode, mediaClientConfig, isEditorViewMode, isSelected, isInline, children, }: MediaViewerContainerProps) => jsx.JSX.Element;
+export declare const MediaViewerContainer: ({ mediaNode, selectedMediaContainerNode, mediaClientConfig, isEditorViewMode, isSelected, isInline, mediaViewerExtensions, children, }: MediaViewerContainerProps) => jsx.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/MediaViewer/PortalWrapper.d.ts

@@ -1,11 +1,13 @@
 import React from 'react';
 import type { MediaADFAttrs } from '@atlaskit/adf-schema';
 import type { Identifier, MediaClientConfig } from '@atlaskit/media-client';
+import { type MediaViewerExtensions } from '@atlaskit/media-viewer';
 interface RenderMediaViewerProps {
+    extensions?: MediaViewerExtensions;
     items?: Identifier[];
     mediaClientConfig: MediaClientConfig;
     onClose: () => void;
     selectedNodeAttrs: MediaADFAttrs;
 }
-export declare const RenderMediaViewer: ({ mediaClientConfig, onClose, selectedNodeAttrs, items, }: RenderMediaViewerProps) => React.ReactPortal;
+export declare const RenderMediaViewer: ({ mediaClientConfig, onClose, selectedNodeAttrs, items, extensions, }: RenderMediaViewerProps) => React.ReactPortal;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "10.0.10",
+	"version": "10.1.0",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -54,19 +54,19 @@
 		"@atlaskit/form": "^15.4.0",
 		"@atlaskit/icon": "^33.0.0",
 		"@atlaskit/icon-lab": "^6.0.0",
-		"@atlaskit/media-card": "^79.15.0",
+		"@atlaskit/media-card": "^79.16.0",
 		"@atlaskit/media-client": "^36.0.0",
 		"@atlaskit/media-client-react": "^5.0.0",
 		"@atlaskit/media-common": "^13.0.0",
 		"@atlaskit/media-filmstrip": "^51.2.0",
 		"@atlaskit/media-picker": "^70.1.0",
 		"@atlaskit/media-ui": "^28.7.0",
-		"@atlaskit/media-viewer": "^52.8.0",
+		"@atlaskit/media-viewer": "^52.9.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^18.0.0",
 		"@atlaskit/textfield": "^8.2.0",
 		"@atlaskit/theme": "^22.0.0",
-		"@atlaskit/tmp-editor-statsig": "^42.0.0",
+		"@atlaskit/tmp-editor-statsig": "^44.0.0",
 		"@atlaskit/tokens": "^11.1.0",
 		"@atlaskit/tooltip": "^21.0.0",
 		"@babel/runtime": "^7.0.0",