@atlaskit/editor-plugin-media 10.0.10 → 10.1.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-media
 
+## 10.1.0
+
+### Minor Changes
+
+- [`6e25e8bbb01c3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6e25e8bbb01c3) -
+  [ux] Adds mediaViewerExtensions prop to media-viewer/src/header and threads it through parents.
+  Allows callers to pass in additional buttons to the image / video preview'
+
+### Patch Changes
+
+- Updated dependencies
+
+## 10.0.11
+
+### Patch Changes
+
+- [`0d04e250bdf4b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0d04e250bdf4b) -
+  [ux] Making submenus for media (color/size) and table (background color) consistent with ADS and
+  fixing incorrect gate mocking in editor-plugin-ai-tests
+- Updated dependencies
+
 ## 10.0.10
 
 ### Patch Changes

package/dist/cjs/mediaPlugin.js

@@ -81,7 +81,8 @@ var mediaViewerStateSelector = function mediaViewerStateSelector(states) {
 };
 var MediaViewerFunctionalComponent = function MediaViewerFunctionalComponent(_ref2) {
   var api = _ref2.api,
-    editorView = _ref2.editorView;
+    editorView = _ref2.editorView,
+    mediaViewerExtensions = _ref2.mediaViewerExtensions;
   // Only traverse document once when media viewer is visible, media viewer items will not update
   // when document changes are made while media viewer is open
   var _useSharedPluginState2 = (0, _hooks.useSharedPluginStateWithSelector)(api, ['media'], mediaViewerStateSelector),
@@ -108,7 +109,8 @@ var MediaViewerFunctionalComponent = function MediaViewerFunctionalComponent(_re
     mediaClientConfig: mediaClientConfig,
     onClose: handleOnClose,
     selectedNodeAttrs: mediaViewerSelectedMedia,
-    items: mediaItems
+    items: mediaItems,
+    extensions: mediaViewerExtensions
   });
 };
 var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
@@ -342,7 +344,8 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
       }
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(MediaViewerFunctionalComponent, {
         api: api,
-        editorView: editorView
+        editorView: editorView,
+        mediaViewerExtensions: options === null || options === void 0 ? void 0 : options.mediaViewerExtensions
       }), /*#__PURE__*/_react.default.createElement(MediaPickerFunctionalComponent, {
         editorDomElement: editorView.dom,
         appearance: appearance,

package/dist/cjs/nodeviews/mediaGroup.js

@@ -53,9 +53,13 @@ var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
         mediaOptions = props.mediaOptions,
         pluginInjectionApi = props.pluginInjectionApi;
       var getPos = this.getPos;
-      return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
+      return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+      , {
         providers: ['contextIdentifierProvider'],
-        providerFactory: providerFactory,
+        providerFactory: providerFactory
+        // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+        ,
         renderNode: function renderNode(_ref2) {
           var contextIdentifierProvider = _ref2.contextIdentifierProvider;
           var renderFn = function renderFn(_ref3) {

package/dist/cjs/nodeviews/mediaGroupNext.js

@@ -248,6 +248,7 @@ var MediaGroupNext = exports.MediaGroupNext = (0, _reactIntlNext.injectIntl)( /*
     setViewMediaClientConfig(mediaClientConfig);
   }, [mediaClientConfig]);
   (0, _react.useEffect)(function () {
+    // eslint-disable-next-line @atlassian/perf-linting/no-chain-state-updates -- Ignored via go/ees017 (to be fixed)
     mediaNodesWithOffsets.forEach(function (_ref5) {
       var node = _ref5.node,
         offset = _ref5.offset;

package/dist/cjs/nodeviews/mediaInline.js

@@ -200,7 +200,9 @@ var MediaInline = exports.MediaInline = function MediaInline(props) {
       isSelected: props.isSelected,
       alt: alt,
       width: width,
-      height: height,
+      height: height
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+      ,
       border: {
         borderSize: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
         borderColor: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.color
@@ -308,11 +310,15 @@ var MediaInlineNodeView = exports.MediaInlineNodeView = /*#__PURE__*/function (_
         api = props.api;
       var view = this.view;
       var getPos = this.getPos;
-      return (0, _react2.jsx)(_providerFactory.WithProviders, {
+      return (0, _react2.jsx)(_providerFactory.WithProviders
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+      , {
         providers: ['contextIdentifierProvider'],
-        providerFactory: providerFactory,
+        providerFactory: providerFactory
+        // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+        ,
         renderNode: function renderNode(_ref4) {
-          var mediaProvider = _ref4.mediaProvider,
+          var _mediaProvider = _ref4.mediaProvider,
             contextIdentifierProvider = _ref4.contextIdentifierProvider;
           return (0, _react2.jsx)(MediaInlineSharedState, {
             identifier: _this.node.attrs.id,

package/dist/cjs/nodeviews/mediaNodeView/index.js

@@ -280,7 +280,9 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
     key: "render",
     value: function render() {
       var providerFactory = this.reactComponentProps.providerFactory;
-      return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
+      return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+      , {
         providers: ['contextIdentifierProvider'],
         providerFactory: providerFactory,
         renderNode: this.renderMediaNodeWithProviders

package/dist/cjs/nodeviews/mediaNodeView/media.js

@@ -366,7 +366,9 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
         onContextMenu: this.selectMediaSingle,
         borderWidth: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
         selected: selected
-      }, /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
+      }, /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+      , {
         data: (0, _defineProperty2.default)({}, _analyticsNamespacedContext.MEDIA_CONTEXT, {
           border: !!borderMark
         })

package/dist/cjs/nodeviews/mediaSingle.js

@@ -253,9 +253,13 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
 
       // getPos is a boolean for marks, since this is a node we know it must be a function
       var getPos = this.getPos;
-      return (0, _react2.jsx)(_providerFactory.WithProviders, {
+      return (0, _react2.jsx)(_providerFactory.WithProviders
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+      , {
         providers: ['contextIdentifierProvider'],
-        providerFactory: providerFactory,
+        providerFactory: providerFactory
+        // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+        ,
         renderNode: function renderNode(_ref2) {
           var contextIdentifierProvider = _ref2.contextIdentifierProvider;
           return (0, _react2.jsx)(MediaSingleNodeWrapper, {

package/dist/cjs/pm-plugins/pixel-resizing/ui/index.js

@@ -79,14 +79,18 @@ var PixelEntry = exports.PixelEntry = function PixelEntry(_ref) {
     mediaWidth: mediaWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH,
     mediaHeight: mediaHeight || _mediaSingle.DEFAULT_IMAGE_HEIGHT,
     minWidth: minWidth,
-    maxWidth: maxWidth,
+    maxWidth: maxWidth
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+    ,
     onChange: function onChange(valid) {
       if (valid) {
         hoverDecoration === null || hoverDecoration === void 0 || hoverDecoration(mediaSingle, true, 'warning')(editorView.state, dispatch, editorView);
       } else {
         hoverDecoration === null || hoverDecoration === void 0 || hoverDecoration(mediaSingle, false)(editorView.state, dispatch, editorView);
       }
-    },
+    }
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+    ,
     onSubmit: function onSubmit(_ref2) {
       var width = _ref2.width,
         validation = _ref2.validation;
@@ -94,7 +98,9 @@ var PixelEntry = exports.PixelEntry = function PixelEntry(_ref) {
       if (tr) {
         dispatch(tr);
       }
-    },
+    }
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+    ,
     onMigrate: function onMigrate() {
       var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
         width: pixelWidthFromElement,
@@ -107,7 +113,9 @@ var PixelEntry = exports.PixelEntry = function PixelEntry(_ref) {
         tr = newTr !== undefined ? newTr : tr;
       }
       dispatch(tr);
-    },
+    }
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+    ,
     onCloseAndSave: function onCloseAndSave(_ref3, setFocus) {
       var width = _ref3.width,
         validation = _ref3.validation;

package/dist/cjs/pm-plugins/pixel-resizing/ui/pixel-entry.js

@@ -29,8 +29,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
+// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives, @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 
 var pixelSizingLabel = (0, _primitives.xcss)({
   gridArea: 'label',
@@ -210,7 +209,7 @@ var PixelEntryComponent = exports.PixelEntryComponent = function PixelEntryCompo
           // Ignored via go/ees005
           // eslint-disable-next-line react/jsx-props-no-spreading
           , (0, _extends2.default)({}, fieldProps, {
-            // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
+            // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/no-unsafe-style-overrides, @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
             css: [_styles.pixelSizingWidthInput, _styles.pixelSizingInput],
             appearance: "none",
             isCompact: true,
@@ -237,7 +236,7 @@ var PixelEntryComponent = exports.PixelEntryComponent = function PixelEntryCompo
           // Ignored via go/ees005
           // eslint-disable-next-line react/jsx-props-no-spreading
           , (0, _extends2.default)({}, fieldProps, {
-            // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
+            // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/no-unsafe-style-overrides, @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
             css: [_styles.pixelSizingHeightInput, _styles.pixelSizingInput],
             appearance: "none",
             isCompact: true,
@@ -312,73 +311,80 @@ var PixelEntryComponentNext = exports.PixelEntryComponentNext = function PixelEn
       }, shouldSetFocus);
     }
   }, [computedWidth, computedHeight, handleCloseAndSave]);
-  return (0, _react2.jsx)(_primitives.Box, {
-    xcss: [pixelEntryWrapperStyles, isViewMode && pixelEntryWrapperViewModeStyles]
-  }, (0, _react2.jsx)(_primitives.Inline, {
-    alignBlock: "center",
-    spread: "space-between"
-  }, (0, _react2.jsx)(_primitives.Box, {
-    paddingInlineStart: "space.100"
-  }, (0, _react2.jsx)(_primitives.Text, {
-    color: "color.text.subtlest"
-  }, formatMessage(_media.pixelEntryMessages.inputWidthLabel))), (0, _react2.jsx)("div", {
-    css: fieldStyles
-  }, (0, _react2.jsx)(_tooltip.default, {
-    hideTooltipOnMouseDown: true,
-    hideTooltipOnClick: true,
-    position: "top",
-    content: formatMessage(_media.pixelEntryMessages.inputWidthTooltip, {
-      maxWidth: maxWidth
-    })
-  }, (0, _react2.jsx)(_textfield.default, {
-    name: "inputWidth",
-    value: computedWidth,
-    ref: widthInputRef,
-    height: "var(--ds-space-250, 20px)",
-    appearance: "none",
-    pattern: "\\d*",
-    "aria-label": formatMessage(_media.pixelEntryMessages.inputWidthAriaLabel, {
-      maxWidth: maxWidth
-    }),
-    onChange: handleFieldChange('inputWidth'),
-    onKeyDown: handleKeyDown
-  }))), (0, _react2.jsx)(_primitives.Box, {
-    paddingInlineStart: "space.100"
-  }, (0, _react2.jsx)(_primitives.Text, {
-    color: "color.text.subtlest"
-  }, formatMessage(_media.pixelEntryMessages.inputHeightTooltip))), (0, _react2.jsx)("div", {
-    css: fieldStyles
-  }, (0, _react2.jsx)(_tooltip.default, {
-    hideTooltipOnMouseDown: true,
-    hideTooltipOnClick: true,
-    content: formatMessage(_media.pixelEntryMessages.inputHeightTooltip),
-    position: "top"
-  }, (0, _react2.jsx)(_textfield.default, {
-    name: "inputHeight",
-    value: computedHeight,
-    height: "var(--ds-space-250, 20px)",
-    appearance: "none",
-    pattern: "\\d*",
-    "aria-label": formatMessage(_media.pixelEntryMessages.inputHeightAriaLabel),
-    onChange: handleFieldChange('inputHeight'),
-    onKeyDown: handleKeyDown
-  }))), !isViewMode && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_primitives.Box, {
-    xcss: dividerStyles
-  }), (0, _react2.jsx)(_new.IconButton, {
-    icon: function icon() {
-      return (0, _react2.jsx)(_cross.default, {
-        label: "",
-        color: "var(--ds-icon-subtlest, #6B6E76)"
-      });
-    },
-    label: formatMessage(_media.pixelEntryMessages.closePixelEntry),
-    appearance: "subtle",
-    onClick: function onClick() {
-      handleCloseAndSave({
-        inputWidth: computedWidth,
-        inputHeight: computedHeight
-      });
-    },
-    onKeyDown: handleCloseButtonKeyDown
-  }))));
+  return (
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    (0, _react2.jsx)(_primitives.Box, {
+      xcss: [pixelEntryWrapperStyles, isViewMode && pixelEntryWrapperViewModeStyles]
+    }, (0, _react2.jsx)(_primitives.Inline, {
+      alignBlock: "center",
+      spread: "space-between"
+    }, (0, _react2.jsx)(_primitives.Box, {
+      paddingInlineStart: "space.100"
+    }, (0, _react2.jsx)(_primitives.Text, {
+      color: "color.text.subtlest"
+    }, formatMessage(_media.pixelEntryMessages.inputWidthLabel))), (0, _react2.jsx)("div", {
+      css: fieldStyles
+    }, (0, _react2.jsx)(_tooltip.default, {
+      hideTooltipOnMouseDown: true,
+      hideTooltipOnClick: true,
+      position: "top",
+      content: formatMessage(_media.pixelEntryMessages.inputWidthTooltip, {
+        maxWidth: maxWidth
+      })
+    }, (0, _react2.jsx)(_textfield.default, {
+      name: "inputWidth",
+      value: computedWidth,
+      ref: widthInputRef,
+      height: "var(--ds-space-250, 20px)",
+      appearance: "none",
+      pattern: "\\d*",
+      "aria-label": formatMessage(_media.pixelEntryMessages.inputWidthAriaLabel, {
+        maxWidth: maxWidth
+      }),
+      onChange: handleFieldChange('inputWidth'),
+      onKeyDown: handleKeyDown
+    }))), (0, _react2.jsx)(_primitives.Box, {
+      paddingInlineStart: "space.100"
+    }, (0, _react2.jsx)(_primitives.Text, {
+      color: "color.text.subtlest"
+    }, formatMessage(_media.pixelEntryMessages.inputHeightTooltip))), (0, _react2.jsx)("div", {
+      css: fieldStyles
+    }, (0, _react2.jsx)(_tooltip.default, {
+      hideTooltipOnMouseDown: true,
+      hideTooltipOnClick: true,
+      content: formatMessage(_media.pixelEntryMessages.inputHeightTooltip),
+      position: "top"
+    }, (0, _react2.jsx)(_textfield.default, {
+      name: "inputHeight",
+      value: computedHeight,
+      height: "var(--ds-space-250, 20px)",
+      appearance: "none",
+      pattern: "\\d*",
+      "aria-label": formatMessage(_media.pixelEntryMessages.inputHeightAriaLabel),
+      onChange: handleFieldChange('inputHeight'),
+      onKeyDown: handleKeyDown
+    }))), !isViewMode && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_primitives.Box, {
+      xcss: dividerStyles
+    }), (0, _react2.jsx)(_new.IconButton
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+    , {
+      icon: function icon() {
+        return (0, _react2.jsx)(_cross.default, {
+          label: "",
+          color: "var(--ds-icon-subtlest, #6B6E76)"
+        });
+      },
+      label: formatMessage(_media.pixelEntryMessages.closePixelEntry),
+      appearance: "subtle"
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+      ,
+      onClick: function onClick() {
+        handleCloseAndSave({
+          inputWidth: computedWidth,
+          inputHeight: computedHeight
+        });
+      },
+      onKeyDown: handleCloseButtonKeyDown
+    }))))
+  );
 };

package/dist/cjs/ui/CommentBadge/index.js

@@ -67,10 +67,14 @@ var CommentBadgeWrapper = exports.CommentBadgeWrapper = function CommentBadgeWra
   return /*#__PURE__*/_react.default.createElement(_mediaSingle.CommentBadgeNext, {
     onClick: onClick,
     mediaSingleElement: mediaSingleElement,
-    status: entered ? 'entered' : status,
+    status: entered ? 'entered' : status
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+    ,
     onMouseEnter: function onMouseEnter() {
       return setEntered(true);
-    },
+    }
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+    ,
     onMouseLeave: function onMouseLeave() {
       return setEntered(false);
     }