@atlaskit/editor-plugin-media 1.36.5 → 1.37.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-media
 
+## 1.37.0
+
+### Minor Changes
+
+- [#154775](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/154775)
+  [`1b353693c3119`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1b353693c3119) -
+  [ED-25348] Refactor Media Group React Class component into Function Component
+
+### Patch Changes
+
+- [#154186](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/154186)
+  [`5c316170d29dd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5c316170d29dd) -
+  Bump @atlaskit/adf-schema to 42.3.1
+- Updated dependencies
+
 ## 1.36.5
 
 ### Patch Changes

package/dist/cjs/nodeviews/mediaGroup.js

@@ -24,8 +24,10 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _close = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/close"));
 var _mediaCommon = require("@atlaskit/media-common");
 var _mediaFilmstrip = require("@atlaskit/media-filmstrip");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useMediaProvider = require("../hooks/useMediaProvider");
 var _pluginKey = require("../pm-plugins/plugin-key");
+var _mediaGroupNext = require("./mediaGroupNext");
 var _mediaNodeUpdater = require("./mediaNodeUpdater");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -346,6 +348,23 @@ var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
             if (!mediaProvider) {
               return null;
             }
+            if ((0, _platformFeatureFlags.fg)('platform_editor_react18_phase2__media_single')) {
+              return /*#__PURE__*/_react.default.createElement(_mediaGroupNext.MediaGroupNext, {
+                node: _this3.node,
+                getPos: getPos,
+                view: _this3.view,
+                forwardRef: forwardRef,
+                disabled: (editorDisabledPlugin || {}).editorDisabled,
+                allowLazyLoading: mediaOptions.allowLazyLoading,
+                mediaProvider: mediaProvider,
+                contextIdentifierProvider: contextIdentifierProvider,
+                isCopyPasteEnabled: mediaOptions.isCopyPasteEnabled,
+                anchorPos: _this3.view.state.selection.$anchor.pos,
+                headPos: _this3.view.state.selection.$head.pos,
+                mediaOptions: mediaOptions,
+                editorViewMode: (editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode) === 'view'
+              });
+            }
             return /*#__PURE__*/_react.default.createElement(IntlMediaGroup, {
               node: _this3.node,
               getPos: getPos,

package/dist/cjs/nodeviews/mediaGroupNext.js

@@ -0,0 +1,295 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MediaGroupNext = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _media = require("@atlaskit/editor-common/media");
+var _utils = require("@atlaskit/editor-common/utils");
+var _close = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/close"));
+var _mediaCommon = require("@atlaskit/media-common");
+var _mediaFilmstrip = require("@atlaskit/media-filmstrip");
+var _pluginKey = require("../pm-plugins/plugin-key");
+var _mediaNodeUpdater = require("./mediaNodeUpdater");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var getIdentifier = function getIdentifier(item) {
+  if (item.attrs.type === 'external') {
+    return {
+      mediaItemType: 'external-image',
+      dataURI: item.attrs.url
+    };
+  }
+  return {
+    id: item.attrs.id,
+    mediaItemType: 'file',
+    collectionName: item.attrs.collection
+  };
+};
+var isNodeSelected = function isNodeSelected(props) {
+  return function (mediaItemPos, mediaGroupPos) {
+    var selected = (0, _utils.isNodeSelectedOrInRange)(props.anchorPos, props.headPos, mediaGroupPos, props.nodeSize);
+    if (selected === _utils.SelectedState.selectedInRange) {
+      return true;
+    }
+    if (selected === _utils.SelectedState.selectedInside && props.anchorPos === mediaItemPos) {
+      return true;
+    }
+    return false;
+  };
+};
+var prepareFilmstripItem = function prepareFilmstripItem(_ref) {
+  var allowLazyLoading = _ref.allowLazyLoading,
+    enableDownloadButton = _ref.enableDownloadButton,
+    handleMediaNodeRemoval = _ref.handleMediaNodeRemoval,
+    getPos = _ref.getPos,
+    intl = _ref.intl,
+    isMediaItemSelected = _ref.isMediaItemSelected,
+    setMediaGroupNodeSelection = _ref.setMediaGroupNodeSelection,
+    featureFlags = _ref.featureFlags;
+  return function (item, idx) {
+    // We declared this to get a fresh position every time
+    var getNodePos = function getNodePos() {
+      var pos = getPos();
+      if (typeof pos !== 'number') {
+        // That may seems weird, but the previous type wasn't match with the real ProseMirror code. And a lot of Media API was built expecting a number
+        // Because the original code would return NaN on runtime
+        // We are just make it explict now.
+        // We may run a deep investagation on Media code to figure out a better fix. But, for now, we want to keep the current behavior.
+        // TODO: ED-13910 prosemirror-bump leftovers
+        return NaN;
+      }
+      return pos + idx + 1;
+    };
+
+    // Media Inline creates a floating toolbar with the same options, excludes these options if enabled
+    var mediaInlineOptions = function mediaInlineOptions() {
+      var allowMediaInline = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      if (!allowMediaInline) {
+        return {
+          shouldEnableDownloadButton: enableDownloadButton,
+          actions: [{
+            handler: handleMediaNodeRemoval.bind(null, undefined, getNodePos),
+            icon: /*#__PURE__*/_react.default.createElement(_close.default, {
+              label: intl.formatMessage(_media.nodeViewsMessages.mediaGroupDeleteLabel)
+            })
+          }]
+        };
+      }
+    };
+    var mediaGroupPos = getPos();
+    return _objectSpread({
+      identifier: getIdentifier(item),
+      isLazy: allowLazyLoading,
+      selected: isMediaItemSelected(getNodePos(), typeof mediaGroupPos === 'number' ? mediaGroupPos : NaN),
+      onClick: function onClick() {
+        setMediaGroupNodeSelection(getNodePos());
+      }
+    }, mediaInlineOptions((0, _mediaCommon.getMediaFeatureFlag)('mediaInline', featureFlags)));
+  };
+};
+
+/**
+ * Keep returning the same ProseMirror Node, unless the node content changed.
+ *
+ * React uses shallow comparation with `Object.is`,
+ * but that can cause multiple re-renders when the same node is given in a different instance.
+ *
+ * To avoid unnecessary re-renders, this hook uses the `Node.eq` from ProseMirror API to compare
+ * previous and new values.
+ */
+var useLatestMediaGroupNode = function useLatestMediaGroupNode(nextMediaNode) {
+  var previousMediaNode = (0, _hooks.usePreviousState)(nextMediaNode);
+  var _React$useState = _react.default.useState(nextMediaNode),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    mediaNode = _React$useState2[0],
+    setMediaNode = _React$useState2[1];
+  _react.default.useEffect(function () {
+    if (!previousMediaNode) {
+      return;
+    }
+    if (!previousMediaNode.eq(nextMediaNode)) {
+      setMediaNode(nextMediaNode);
+    }
+  }, [previousMediaNode, nextMediaNode]);
+  return mediaNode;
+};
+var runMediaNodeUpdate = /*#__PURE__*/function () {
+  var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref2) {
+    var mediaNodeUpdater, getPos, node, updateAttrs, contextId, hasDifferentContextId;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          mediaNodeUpdater = _ref2.mediaNodeUpdater, getPos = _ref2.getPos, node = _ref2.node, updateAttrs = _ref2.updateAttrs;
+          if (!updateAttrs) {
+            _context.next = 4;
+            break;
+          }
+          _context.next = 4;
+          return mediaNodeUpdater.updateNodeAttrs(getPos);
+        case 4:
+          contextId = mediaNodeUpdater.getNodeContextId();
+          if (contextId) {
+            _context.next = 8;
+            break;
+          }
+          _context.next = 8;
+          return mediaNodeUpdater.updateNodeContextId(getPos);
+        case 8:
+          _context.next = 10;
+          return mediaNodeUpdater.hasDifferentContextId();
+        case 10:
+          hasDifferentContextId = _context.sent;
+          if (!hasDifferentContextId) {
+            _context.next = 14;
+            break;
+          }
+          _context.next = 14;
+          return mediaNodeUpdater.copyNodeFromPos(getPos, {
+            traceId: node.attrs.__mediaTraceId
+          });
+        case 14:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function runMediaNodeUpdate(_x) {
+    return _ref3.apply(this, arguments);
+  };
+}();
+var noop = function noop() {};
+var MediaGroupNext = exports.MediaGroupNext = (0, _reactIntlNext.injectIntl)( /*#__PURE__*/_react.default.memo(function (props) {
+  var _props$mediaOptions = props.mediaOptions,
+    allowLazyLoading = _props$mediaOptions.allowLazyLoading,
+    enableDownloadButton = _props$mediaOptions.enableDownloadButton,
+    featureFlags = _props$mediaOptions.featureFlags,
+    intl = props.intl,
+    _getPos = props.getPos,
+    anchorPos = props.anchorPos,
+    headPos = props.headPos,
+    view = props.view,
+    disabled = props.disabled,
+    editorViewMode = props.editorViewMode,
+    mediaProvider = props.mediaProvider,
+    contextIdentifierProvider = props.contextIdentifierProvider,
+    isCopyPasteEnabled = props.isCopyPasteEnabled;
+  var mediaGroupNode = useLatestMediaGroupNode(props.node);
+  var mediaPluginState = (0, _react.useMemo)(function () {
+    return _pluginKey.stateKey.getState(view.state);
+  }, [view.state]);
+  var mediaClientConfig = mediaPluginState === null || mediaPluginState === void 0 ? void 0 : mediaPluginState.mediaClientConfig;
+  var handleMediaGroupUpdate = mediaPluginState === null || mediaPluginState === void 0 ? void 0 : mediaPluginState.handleMediaGroupUpdate;
+  var _useState = (0, _react.useState)(undefined),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    viewMediaClientConfig = _useState2[0],
+    setViewMediaClientConfig = _useState2[1];
+  var nodeSize = mediaGroupNode.nodeSize;
+  var mediaNodesWithOffsets = (0, _react.useMemo)(function () {
+    var result = [];
+    mediaGroupNode.forEach(function (item, childOffset) {
+      result.push({
+        node: item,
+        offset: childOffset
+      });
+    });
+    return result;
+  }, [mediaGroupNode]);
+  var previousMediaNodesWithOffsets = (0, _hooks.usePreviousState)(mediaNodesWithOffsets);
+  var handleMediaNodeRemoval = (0, _react.useMemo)(function () {
+    return disabled || !mediaPluginState ? noop : mediaPluginState.handleMediaNodeRemoval;
+  }, [disabled, mediaPluginState]);
+  var setMediaGroupNodeSelection = (0, _react.useCallback)(function (pos) {
+    (0, _utils.setNodeSelection)(view, pos);
+  }, [view]);
+  var isMediaItemSelected = (0, _react.useMemo)(function () {
+    return isNodeSelected({
+      anchorPos: anchorPos,
+      headPos: headPos,
+      nodeSize: nodeSize
+    });
+  }, [anchorPos, headPos, nodeSize]);
+  var filmstripItem = (0, _react.useMemo)(function () {
+    return prepareFilmstripItem({
+      allowLazyLoading: allowLazyLoading,
+      enableDownloadButton: enableDownloadButton,
+      handleMediaNodeRemoval: handleMediaNodeRemoval,
+      getPos: _getPos,
+      intl: intl,
+      isMediaItemSelected: isMediaItemSelected,
+      setMediaGroupNodeSelection: setMediaGroupNodeSelection,
+      featureFlags: featureFlags
+    });
+  }, [allowLazyLoading, enableDownloadButton, handleMediaNodeRemoval, _getPos, intl, isMediaItemSelected, setMediaGroupNodeSelection, featureFlags]);
+  var items = (0, _react.useMemo)(function () {
+    return mediaNodesWithOffsets.map(function (_ref4) {
+      var node = _ref4.node,
+        offset = _ref4.offset;
+      return filmstripItem(node, offset);
+    });
+  }, [mediaNodesWithOffsets, filmstripItem]);
+  (0, _react.useEffect)(function () {
+    setViewMediaClientConfig(mediaClientConfig);
+  }, [mediaClientConfig]);
+  (0, _react.useEffect)(function () {
+    mediaNodesWithOffsets.forEach(function (_ref5) {
+      var node = _ref5.node,
+        offset = _ref5.offset;
+      var mediaNodeUpdater = (0, _mediaNodeUpdater.createMediaNodeUpdater)({
+        view: view,
+        mediaProvider: mediaProvider,
+        contextIdentifierProvider: contextIdentifierProvider,
+        node: node,
+        isMediaSingle: false
+      });
+      var updateAttrs = isCopyPasteEnabled || isCopyPasteEnabled === undefined;
+      runMediaNodeUpdate({
+        mediaNodeUpdater: mediaNodeUpdater,
+        node: node,
+        updateAttrs: updateAttrs,
+        getPos: function getPos() {
+          var pos = _getPos();
+          if (typeof pos !== 'number') {
+            return undefined;
+          }
+          return pos + offset + 1;
+        }
+      });
+    });
+  }, [view, contextIdentifierProvider, _getPos, mediaProvider, mediaNodesWithOffsets, isCopyPasteEnabled]);
+  (0, _react.useEffect)(function () {
+    if (!handleMediaGroupUpdate || !previousMediaNodesWithOffsets) {
+      return;
+    }
+    var old = previousMediaNodesWithOffsets.map(function (_ref6) {
+      var node = _ref6.node;
+      return node;
+    });
+    var next = mediaNodesWithOffsets.map(function (_ref7) {
+      var node = _ref7.node;
+      return node;
+    });
+    handleMediaGroupUpdate(old, next);
+    return function () {
+      handleMediaGroupUpdate(next, []);
+    };
+  }, [handleMediaGroupUpdate, mediaNodesWithOffsets, previousMediaNodesWithOffsets]);
+  return /*#__PURE__*/_react.default.createElement(_mediaFilmstrip.Filmstrip, {
+    items: items,
+    mediaClientConfig: viewMediaClientConfig,
+    featureFlags: featureFlags,
+    shouldOpenMediaViewer: editorViewMode
+  });
+}));
+MediaGroupNext.displayName = 'MediaGroup';

package/dist/cjs/nodeviews/mediaNodeUpdater.js

@@ -779,8 +779,6 @@ var hasPrivateAttrsChanged = function hasPrivateAttrsChanged(currentAttrs, newAt
   return currentAttrs.__fileName !== newAttrs.__fileName || currentAttrs.__fileMimeType !== newAttrs.__fileMimeType || currentAttrs.__fileSize !== newAttrs.__fileSize || currentAttrs.__contextId !== newAttrs.__contextId;
 };
 var createMediaNodeUpdater = exports.createMediaNodeUpdater = function createMediaNodeUpdater(props) {
-  var updaterProps = _objectSpread(_objectSpread({}, props), {}, {
-    isMediaSingle: true
-  });
+  var updaterProps = _objectSpread({}, props);
   return new MediaNodeUpdater(updaterProps);
 };

package/dist/es2019/nodeviews/mediaGroup.js

@@ -9,8 +9,10 @@ import { isNodeSelectedOrInRange, SelectedState, setNodeSelection } from '@atlas
 import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
 import { Filmstrip } from '@atlaskit/media-filmstrip';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useMediaProvider } from '../hooks/useMediaProvider';
 import { stateKey as mediaStateKey } from '../pm-plugins/plugin-key';
+import { MediaGroupNext } from './mediaGroupNext';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
 const isMediaGroupSelectedFromProps = props => {
   /**
@@ -290,6 +292,23 @@ class MediaGroupNodeView extends ReactNodeView {
           if (!mediaProvider) {
             return null;
           }
+          if (fg('platform_editor_react18_phase2__media_single')) {
+            return /*#__PURE__*/React.createElement(MediaGroupNext, {
+              node: this.node,
+              getPos: getPos,
+              view: this.view,
+              forwardRef: forwardRef,
+              disabled: (editorDisabledPlugin || {}).editorDisabled,
+              allowLazyLoading: mediaOptions.allowLazyLoading,
+              mediaProvider: mediaProvider,
+              contextIdentifierProvider: contextIdentifierProvider,
+              isCopyPasteEnabled: mediaOptions.isCopyPasteEnabled,
+              anchorPos: this.view.state.selection.$anchor.pos,
+              headPos: this.view.state.selection.$head.pos,
+              mediaOptions: mediaOptions,
+              editorViewMode: (editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode) === 'view'
+            });
+          }
           return /*#__PURE__*/React.createElement(IntlMediaGroup, {
             node: this.node,
             getPos: getPos,

package/dist/es2019/nodeviews/mediaGroupNext.js

@@ -0,0 +1,249 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { injectIntl } from 'react-intl-next';
+import { usePreviousState } from '@atlaskit/editor-common/hooks';
+import { nodeViewsMessages as messages } from '@atlaskit/editor-common/media';
+import { isNodeSelectedOrInRange, SelectedState, setNodeSelection } from '@atlaskit/editor-common/utils';
+import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
+import { getMediaFeatureFlag } from '@atlaskit/media-common';
+import { Filmstrip } from '@atlaskit/media-filmstrip';
+import { stateKey as mediaStateKey } from '../pm-plugins/plugin-key';
+import { createMediaNodeUpdater } from './mediaNodeUpdater';
+const getIdentifier = item => {
+  if (item.attrs.type === 'external') {
+    return {
+      mediaItemType: 'external-image',
+      dataURI: item.attrs.url
+    };
+  }
+  return {
+    id: item.attrs.id,
+    mediaItemType: 'file',
+    collectionName: item.attrs.collection
+  };
+};
+const isNodeSelected = props => (mediaItemPos, mediaGroupPos) => {
+  const selected = isNodeSelectedOrInRange(props.anchorPos, props.headPos, mediaGroupPos, props.nodeSize);
+  if (selected === SelectedState.selectedInRange) {
+    return true;
+  }
+  if (selected === SelectedState.selectedInside && props.anchorPos === mediaItemPos) {
+    return true;
+  }
+  return false;
+};
+const prepareFilmstripItem = ({
+  allowLazyLoading,
+  enableDownloadButton,
+  handleMediaNodeRemoval,
+  getPos,
+  intl,
+  isMediaItemSelected,
+  setMediaGroupNodeSelection,
+  featureFlags
+}) => (item, idx) => {
+  // We declared this to get a fresh position every time
+  const getNodePos = () => {
+    const pos = getPos();
+    if (typeof pos !== 'number') {
+      // That may seems weird, but the previous type wasn't match with the real ProseMirror code. And a lot of Media API was built expecting a number
+      // Because the original code would return NaN on runtime
+      // We are just make it explict now.
+      // We may run a deep investagation on Media code to figure out a better fix. But, for now, we want to keep the current behavior.
+      // TODO: ED-13910 prosemirror-bump leftovers
+      return NaN;
+    }
+    return pos + idx + 1;
+  };
+
+  // Media Inline creates a floating toolbar with the same options, excludes these options if enabled
+  const mediaInlineOptions = (allowMediaInline = false) => {
+    if (!allowMediaInline) {
+      return {
+        shouldEnableDownloadButton: enableDownloadButton,
+        actions: [{
+          handler: handleMediaNodeRemoval.bind(null, undefined, getNodePos),
+          icon: /*#__PURE__*/React.createElement(EditorCloseIcon, {
+            label: intl.formatMessage(messages.mediaGroupDeleteLabel)
+          })
+        }]
+      };
+    }
+  };
+  const mediaGroupPos = getPos();
+  return {
+    identifier: getIdentifier(item),
+    isLazy: allowLazyLoading,
+    selected: isMediaItemSelected(getNodePos(), typeof mediaGroupPos === 'number' ? mediaGroupPos : NaN),
+    onClick: () => {
+      setMediaGroupNodeSelection(getNodePos());
+    },
+    ...mediaInlineOptions(getMediaFeatureFlag('mediaInline', featureFlags))
+  };
+};
+
+/**
+ * Keep returning the same ProseMirror Node, unless the node content changed.
+ *
+ * React uses shallow comparation with `Object.is`,
+ * but that can cause multiple re-renders when the same node is given in a different instance.
+ *
+ * To avoid unnecessary re-renders, this hook uses the `Node.eq` from ProseMirror API to compare
+ * previous and new values.
+ */
+const useLatestMediaGroupNode = nextMediaNode => {
+  const previousMediaNode = usePreviousState(nextMediaNode);
+  const [mediaNode, setMediaNode] = React.useState(nextMediaNode);
+  React.useEffect(() => {
+    if (!previousMediaNode) {
+      return;
+    }
+    if (!previousMediaNode.eq(nextMediaNode)) {
+      setMediaNode(nextMediaNode);
+    }
+  }, [previousMediaNode, nextMediaNode]);
+  return mediaNode;
+};
+const runMediaNodeUpdate = async ({
+  mediaNodeUpdater,
+  getPos,
+  node,
+  updateAttrs
+}) => {
+  if (updateAttrs) {
+    await mediaNodeUpdater.updateNodeAttrs(getPos);
+  }
+  const contextId = mediaNodeUpdater.getNodeContextId();
+  if (!contextId) {
+    await mediaNodeUpdater.updateNodeContextId(getPos);
+  }
+  const hasDifferentContextId = await mediaNodeUpdater.hasDifferentContextId();
+  if (hasDifferentContextId) {
+    await mediaNodeUpdater.copyNodeFromPos(getPos, {
+      traceId: node.attrs.__mediaTraceId
+    });
+  }
+};
+const noop = () => {};
+export const MediaGroupNext = injectIntl( /*#__PURE__*/React.memo(props => {
+  const {
+    mediaOptions: {
+      allowLazyLoading,
+      enableDownloadButton,
+      featureFlags
+    },
+    intl,
+    getPos,
+    anchorPos,
+    headPos,
+    view,
+    disabled,
+    editorViewMode,
+    mediaProvider,
+    contextIdentifierProvider,
+    isCopyPasteEnabled
+  } = props;
+  const mediaGroupNode = useLatestMediaGroupNode(props.node);
+  const mediaPluginState = useMemo(() => {
+    return mediaStateKey.getState(view.state);
+  }, [view.state]);
+  const mediaClientConfig = mediaPluginState === null || mediaPluginState === void 0 ? void 0 : mediaPluginState.mediaClientConfig;
+  const handleMediaGroupUpdate = mediaPluginState === null || mediaPluginState === void 0 ? void 0 : mediaPluginState.handleMediaGroupUpdate;
+  const [viewMediaClientConfig, setViewMediaClientConfig] = useState(undefined);
+  const nodeSize = mediaGroupNode.nodeSize;
+  const mediaNodesWithOffsets = useMemo(() => {
+    const result = [];
+    mediaGroupNode.forEach((item, childOffset) => {
+      result.push({
+        node: item,
+        offset: childOffset
+      });
+    });
+    return result;
+  }, [mediaGroupNode]);
+  const previousMediaNodesWithOffsets = usePreviousState(mediaNodesWithOffsets);
+  const handleMediaNodeRemoval = useMemo(() => {
+    return disabled || !mediaPluginState ? noop : mediaPluginState.handleMediaNodeRemoval;
+  }, [disabled, mediaPluginState]);
+  const setMediaGroupNodeSelection = useCallback(pos => {
+    setNodeSelection(view, pos);
+  }, [view]);
+  const isMediaItemSelected = useMemo(() => {
+    return isNodeSelected({
+      anchorPos,
+      headPos,
+      nodeSize
+    });
+  }, [anchorPos, headPos, nodeSize]);
+  const filmstripItem = useMemo(() => {
+    return prepareFilmstripItem({
+      allowLazyLoading,
+      enableDownloadButton,
+      handleMediaNodeRemoval,
+      getPos,
+      intl,
+      isMediaItemSelected,
+      setMediaGroupNodeSelection,
+      featureFlags
+    });
+  }, [allowLazyLoading, enableDownloadButton, handleMediaNodeRemoval, getPos, intl, isMediaItemSelected, setMediaGroupNodeSelection, featureFlags]);
+  const items = useMemo(() => {
+    return mediaNodesWithOffsets.map(({
+      node,
+      offset
+    }) => {
+      return filmstripItem(node, offset);
+    });
+  }, [mediaNodesWithOffsets, filmstripItem]);
+  useEffect(() => {
+    setViewMediaClientConfig(mediaClientConfig);
+  }, [mediaClientConfig]);
+  useEffect(() => {
+    mediaNodesWithOffsets.forEach(({
+      node,
+      offset
+    }) => {
+      const mediaNodeUpdater = createMediaNodeUpdater({
+        view,
+        mediaProvider,
+        contextIdentifierProvider,
+        node,
+        isMediaSingle: false
+      });
+      const updateAttrs = isCopyPasteEnabled || isCopyPasteEnabled === undefined;
+      runMediaNodeUpdate({
+        mediaNodeUpdater,
+        node,
+        updateAttrs,
+        getPos: () => {
+          const pos = getPos();
+          if (typeof pos !== 'number') {
+            return undefined;
+          }
+          return pos + offset + 1;
+        }
+      });
+    });
+  }, [view, contextIdentifierProvider, getPos, mediaProvider, mediaNodesWithOffsets, isCopyPasteEnabled]);
+  useEffect(() => {
+    if (!handleMediaGroupUpdate || !previousMediaNodesWithOffsets) {
+      return;
+    }
+    const old = previousMediaNodesWithOffsets.map(({
+      node
+    }) => node);
+    const next = mediaNodesWithOffsets.map(({
+      node
+    }) => node);
+    handleMediaGroupUpdate(old, next);
+    return () => {
+      handleMediaGroupUpdate(next, []);
+    };
+  }, [handleMediaGroupUpdate, mediaNodesWithOffsets, previousMediaNodesWithOffsets]);
+  return /*#__PURE__*/React.createElement(Filmstrip, {
+    items: items,
+    mediaClientConfig: viewMediaClientConfig,
+    featureFlags: featureFlags,
+    shouldOpenMediaViewer: editorViewMode
+  });
+}));
+MediaGroupNext.displayName = 'MediaGroup';

package/dist/es2019/nodeviews/mediaNodeUpdater.js

@@ -424,8 +424,7 @@ const hasPrivateAttrsChanged = (currentAttrs, newAttrs) => {
 };
 export const createMediaNodeUpdater = props => {
   const updaterProps = {
-    ...props,
-    isMediaSingle: true
+    ...props
   };
   return new MediaNodeUpdater(updaterProps);
 };

package/dist/esm/nodeviews/mediaGroup.js

@@ -21,8 +21,10 @@ import { isNodeSelectedOrInRange, SelectedState, setNodeSelection } from '@atlas
 import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
 import { Filmstrip } from '@atlaskit/media-filmstrip';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useMediaProvider } from '../hooks/useMediaProvider';
 import { stateKey as mediaStateKey } from '../pm-plugins/plugin-key';
+import { MediaGroupNext } from './mediaGroupNext';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
 var isMediaGroupSelectedFromProps = function isMediaGroupSelectedFromProps(props) {
   /**
@@ -339,6 +341,23 @@ var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
             if (!mediaProvider) {
               return null;
             }
+            if (fg('platform_editor_react18_phase2__media_single')) {
+              return /*#__PURE__*/React.createElement(MediaGroupNext, {
+                node: _this3.node,
+                getPos: getPos,
+                view: _this3.view,
+                forwardRef: forwardRef,
+                disabled: (editorDisabledPlugin || {}).editorDisabled,
+                allowLazyLoading: mediaOptions.allowLazyLoading,
+                mediaProvider: mediaProvider,
+                contextIdentifierProvider: contextIdentifierProvider,
+                isCopyPasteEnabled: mediaOptions.isCopyPasteEnabled,
+                anchorPos: _this3.view.state.selection.$anchor.pos,
+                headPos: _this3.view.state.selection.$head.pos,
+                mediaOptions: mediaOptions,
+                editorViewMode: (editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode) === 'view'
+              });
+            }
             return /*#__PURE__*/React.createElement(IntlMediaGroup, {
               node: _this3.node,
               getPos: getPos,

package/dist/esm/nodeviews/mediaGroupNext.js

@@ -0,0 +1,285 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { injectIntl } from 'react-intl-next';
+import { usePreviousState } from '@atlaskit/editor-common/hooks';
+import { nodeViewsMessages as messages } from '@atlaskit/editor-common/media';
+import { isNodeSelectedOrInRange, SelectedState, setNodeSelection } from '@atlaskit/editor-common/utils';
+import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
+import { getMediaFeatureFlag } from '@atlaskit/media-common';
+import { Filmstrip } from '@atlaskit/media-filmstrip';
+import { stateKey as mediaStateKey } from '../pm-plugins/plugin-key';
+import { createMediaNodeUpdater } from './mediaNodeUpdater';
+var getIdentifier = function getIdentifier(item) {
+  if (item.attrs.type === 'external') {
+    return {
+      mediaItemType: 'external-image',
+      dataURI: item.attrs.url
+    };
+  }
+  return {
+    id: item.attrs.id,
+    mediaItemType: 'file',
+    collectionName: item.attrs.collection
+  };
+};
+var isNodeSelected = function isNodeSelected(props) {
+  return function (mediaItemPos, mediaGroupPos) {
+    var selected = isNodeSelectedOrInRange(props.anchorPos, props.headPos, mediaGroupPos, props.nodeSize);
+    if (selected === SelectedState.selectedInRange) {
+      return true;
+    }
+    if (selected === SelectedState.selectedInside && props.anchorPos === mediaItemPos) {
+      return true;
+    }
+    return false;
+  };
+};
+var prepareFilmstripItem = function prepareFilmstripItem(_ref) {
+  var allowLazyLoading = _ref.allowLazyLoading,
+    enableDownloadButton = _ref.enableDownloadButton,
+    handleMediaNodeRemoval = _ref.handleMediaNodeRemoval,
+    getPos = _ref.getPos,
+    intl = _ref.intl,
+    isMediaItemSelected = _ref.isMediaItemSelected,
+    setMediaGroupNodeSelection = _ref.setMediaGroupNodeSelection,
+    featureFlags = _ref.featureFlags;
+  return function (item, idx) {
+    // We declared this to get a fresh position every time
+    var getNodePos = function getNodePos() {
+      var pos = getPos();
+      if (typeof pos !== 'number') {
+        // That may seems weird, but the previous type wasn't match with the real ProseMirror code. And a lot of Media API was built expecting a number
+        // Because the original code would return NaN on runtime
+        // We are just make it explict now.
+        // We may run a deep investagation on Media code to figure out a better fix. But, for now, we want to keep the current behavior.
+        // TODO: ED-13910 prosemirror-bump leftovers
+        return NaN;
+      }
+      return pos + idx + 1;
+    };
+
+    // Media Inline creates a floating toolbar with the same options, excludes these options if enabled
+    var mediaInlineOptions = function mediaInlineOptions() {
+      var allowMediaInline = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      if (!allowMediaInline) {
+        return {
+          shouldEnableDownloadButton: enableDownloadButton,
+          actions: [{
+            handler: handleMediaNodeRemoval.bind(null, undefined, getNodePos),
+            icon: /*#__PURE__*/React.createElement(EditorCloseIcon, {
+              label: intl.formatMessage(messages.mediaGroupDeleteLabel)
+            })
+          }]
+        };
+      }
+    };
+    var mediaGroupPos = getPos();
+    return _objectSpread({
+      identifier: getIdentifier(item),
+      isLazy: allowLazyLoading,
+      selected: isMediaItemSelected(getNodePos(), typeof mediaGroupPos === 'number' ? mediaGroupPos : NaN),
+      onClick: function onClick() {
+        setMediaGroupNodeSelection(getNodePos());
+      }
+    }, mediaInlineOptions(getMediaFeatureFlag('mediaInline', featureFlags)));
+  };
+};
+
+/**
+ * Keep returning the same ProseMirror Node, unless the node content changed.
+ *
+ * React uses shallow comparation with `Object.is`,
+ * but that can cause multiple re-renders when the same node is given in a different instance.
+ *
+ * To avoid unnecessary re-renders, this hook uses the `Node.eq` from ProseMirror API to compare
+ * previous and new values.
+ */
+var useLatestMediaGroupNode = function useLatestMediaGroupNode(nextMediaNode) {
+  var previousMediaNode = usePreviousState(nextMediaNode);
+  var _React$useState = React.useState(nextMediaNode),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    mediaNode = _React$useState2[0],
+    setMediaNode = _React$useState2[1];
+  React.useEffect(function () {
+    if (!previousMediaNode) {
+      return;
+    }
+    if (!previousMediaNode.eq(nextMediaNode)) {
+      setMediaNode(nextMediaNode);
+    }
+  }, [previousMediaNode, nextMediaNode]);
+  return mediaNode;
+};
+var runMediaNodeUpdate = /*#__PURE__*/function () {
+  var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref2) {
+    var mediaNodeUpdater, getPos, node, updateAttrs, contextId, hasDifferentContextId;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          mediaNodeUpdater = _ref2.mediaNodeUpdater, getPos = _ref2.getPos, node = _ref2.node, updateAttrs = _ref2.updateAttrs;
+          if (!updateAttrs) {
+            _context.next = 4;
+            break;
+          }
+          _context.next = 4;
+          return mediaNodeUpdater.updateNodeAttrs(getPos);
+        case 4:
+          contextId = mediaNodeUpdater.getNodeContextId();
+          if (contextId) {
+            _context.next = 8;
+            break;
+          }
+          _context.next = 8;
+          return mediaNodeUpdater.updateNodeContextId(getPos);
+        case 8:
+          _context.next = 10;
+          return mediaNodeUpdater.hasDifferentContextId();
+        case 10:
+          hasDifferentContextId = _context.sent;
+          if (!hasDifferentContextId) {
+            _context.next = 14;
+            break;
+          }
+          _context.next = 14;
+          return mediaNodeUpdater.copyNodeFromPos(getPos, {
+            traceId: node.attrs.__mediaTraceId
+          });
+        case 14:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function runMediaNodeUpdate(_x) {
+    return _ref3.apply(this, arguments);
+  };
+}();
+var noop = function noop() {};
+export var MediaGroupNext = injectIntl( /*#__PURE__*/React.memo(function (props) {
+  var _props$mediaOptions = props.mediaOptions,
+    allowLazyLoading = _props$mediaOptions.allowLazyLoading,
+    enableDownloadButton = _props$mediaOptions.enableDownloadButton,
+    featureFlags = _props$mediaOptions.featureFlags,
+    intl = props.intl,
+    _getPos = props.getPos,
+    anchorPos = props.anchorPos,
+    headPos = props.headPos,
+    view = props.view,
+    disabled = props.disabled,
+    editorViewMode = props.editorViewMode,
+    mediaProvider = props.mediaProvider,
+    contextIdentifierProvider = props.contextIdentifierProvider,
+    isCopyPasteEnabled = props.isCopyPasteEnabled;
+  var mediaGroupNode = useLatestMediaGroupNode(props.node);
+  var mediaPluginState = useMemo(function () {
+    return mediaStateKey.getState(view.state);
+  }, [view.state]);
+  var mediaClientConfig = mediaPluginState === null || mediaPluginState === void 0 ? void 0 : mediaPluginState.mediaClientConfig;
+  var handleMediaGroupUpdate = mediaPluginState === null || mediaPluginState === void 0 ? void 0 : mediaPluginState.handleMediaGroupUpdate;
+  var _useState = useState(undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    viewMediaClientConfig = _useState2[0],
+    setViewMediaClientConfig = _useState2[1];
+  var nodeSize = mediaGroupNode.nodeSize;
+  var mediaNodesWithOffsets = useMemo(function () {
+    var result = [];
+    mediaGroupNode.forEach(function (item, childOffset) {
+      result.push({
+        node: item,
+        offset: childOffset
+      });
+    });
+    return result;
+  }, [mediaGroupNode]);
+  var previousMediaNodesWithOffsets = usePreviousState(mediaNodesWithOffsets);
+  var handleMediaNodeRemoval = useMemo(function () {
+    return disabled || !mediaPluginState ? noop : mediaPluginState.handleMediaNodeRemoval;
+  }, [disabled, mediaPluginState]);
+  var setMediaGroupNodeSelection = useCallback(function (pos) {
+    setNodeSelection(view, pos);
+  }, [view]);
+  var isMediaItemSelected = useMemo(function () {
+    return isNodeSelected({
+      anchorPos: anchorPos,
+      headPos: headPos,
+      nodeSize: nodeSize
+    });
+  }, [anchorPos, headPos, nodeSize]);
+  var filmstripItem = useMemo(function () {
+    return prepareFilmstripItem({
+      allowLazyLoading: allowLazyLoading,
+      enableDownloadButton: enableDownloadButton,
+      handleMediaNodeRemoval: handleMediaNodeRemoval,
+      getPos: _getPos,
+      intl: intl,
+      isMediaItemSelected: isMediaItemSelected,
+      setMediaGroupNodeSelection: setMediaGroupNodeSelection,
+      featureFlags: featureFlags
+    });
+  }, [allowLazyLoading, enableDownloadButton, handleMediaNodeRemoval, _getPos, intl, isMediaItemSelected, setMediaGroupNodeSelection, featureFlags]);
+  var items = useMemo(function () {
+    return mediaNodesWithOffsets.map(function (_ref4) {
+      var node = _ref4.node,
+        offset = _ref4.offset;
+      return filmstripItem(node, offset);
+    });
+  }, [mediaNodesWithOffsets, filmstripItem]);
+  useEffect(function () {
+    setViewMediaClientConfig(mediaClientConfig);
+  }, [mediaClientConfig]);
+  useEffect(function () {
+    mediaNodesWithOffsets.forEach(function (_ref5) {
+      var node = _ref5.node,
+        offset = _ref5.offset;
+      var mediaNodeUpdater = createMediaNodeUpdater({
+        view: view,
+        mediaProvider: mediaProvider,
+        contextIdentifierProvider: contextIdentifierProvider,
+        node: node,
+        isMediaSingle: false
+      });
+      var updateAttrs = isCopyPasteEnabled || isCopyPasteEnabled === undefined;
+      runMediaNodeUpdate({
+        mediaNodeUpdater: mediaNodeUpdater,
+        node: node,
+        updateAttrs: updateAttrs,
+        getPos: function getPos() {
+          var pos = _getPos();
+          if (typeof pos !== 'number') {
+            return undefined;
+          }
+          return pos + offset + 1;
+        }
+      });
+    });
+  }, [view, contextIdentifierProvider, _getPos, mediaProvider, mediaNodesWithOffsets, isCopyPasteEnabled]);
+  useEffect(function () {
+    if (!handleMediaGroupUpdate || !previousMediaNodesWithOffsets) {
+      return;
+    }
+    var old = previousMediaNodesWithOffsets.map(function (_ref6) {
+      var node = _ref6.node;
+      return node;
+    });
+    var next = mediaNodesWithOffsets.map(function (_ref7) {
+      var node = _ref7.node;
+      return node;
+    });
+    handleMediaGroupUpdate(old, next);
+    return function () {
+      handleMediaGroupUpdate(next, []);
+    };
+  }, [handleMediaGroupUpdate, mediaNodesWithOffsets, previousMediaNodesWithOffsets]);
+  return /*#__PURE__*/React.createElement(Filmstrip, {
+    items: items,
+    mediaClientConfig: viewMediaClientConfig,
+    featureFlags: featureFlags,
+    shouldOpenMediaViewer: editorViewMode
+  });
+}));
+MediaGroupNext.displayName = 'MediaGroup';

package/dist/esm/nodeviews/mediaNodeUpdater.js

@@ -772,8 +772,6 @@ var hasPrivateAttrsChanged = function hasPrivateAttrsChanged(currentAttrs, newAt
   return currentAttrs.__fileName !== newAttrs.__fileName || currentAttrs.__fileMimeType !== newAttrs.__fileMimeType || currentAttrs.__fileSize !== newAttrs.__fileSize || currentAttrs.__contextId !== newAttrs.__contextId;
 };
 export var createMediaNodeUpdater = function createMediaNodeUpdater(props) {
-  var updaterProps = _objectSpread(_objectSpread({}, props), {}, {
-    isMediaSingle: true
-  });
+  var updaterProps = _objectSpread({}, props);
   return new MediaNodeUpdater(updaterProps);
 };

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { ContextIdentifierProvider, MediaProvider } from '@atlaskit/editor-common/provider-factory';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { MediaOptions } from '../types';
+export declare const MediaGroupNext: React.FC<import("react-intl-next").WithIntlProps<{
+    forwardRef?: ((ref: HTMLElement) => void) | undefined;
+    node: PMNode;
+    view: EditorView;
+    getPos: () => number | undefined;
+    disabled?: boolean | undefined;
+    editorViewMode?: boolean | undefined;
+    allowLazyLoading?: boolean | undefined;
+    mediaProvider: Promise<MediaProvider>;
+    contextIdentifierProvider?: Promise<ContextIdentifierProvider> | undefined;
+    isCopyPasteEnabled?: boolean | undefined;
+    anchorPos: number;
+    headPos: number;
+    mediaOptions: MediaOptions;
+} & WrappedComponentProps>> & {
+    WrappedComponent: React.ComponentType<{
+        forwardRef?: ((ref: HTMLElement) => void) | undefined;
+        node: PMNode;
+        view: EditorView;
+        getPos: () => number | undefined;
+        disabled?: boolean | undefined;
+        editorViewMode?: boolean | undefined;
+        allowLazyLoading?: boolean | undefined;
+        mediaProvider: Promise<MediaProvider>;
+        contextIdentifierProvider?: Promise<ContextIdentifierProvider> | undefined;
+        isCopyPasteEnabled?: boolean | undefined;
+        anchorPos: number;
+        headPos: number;
+        mediaOptions: MediaOptions;
+    } & WrappedComponentProps>;
+};

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { ContextIdentifierProvider, MediaProvider } from '@atlaskit/editor-common/provider-factory';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { MediaOptions } from '../types';
+export declare const MediaGroupNext: React.FC<import("react-intl-next").WithIntlProps<{
+    forwardRef?: ((ref: HTMLElement) => void) | undefined;
+    node: PMNode;
+    view: EditorView;
+    getPos: () => number | undefined;
+    disabled?: boolean | undefined;
+    editorViewMode?: boolean | undefined;
+    allowLazyLoading?: boolean | undefined;
+    mediaProvider: Promise<MediaProvider>;
+    contextIdentifierProvider?: Promise<ContextIdentifierProvider> | undefined;
+    isCopyPasteEnabled?: boolean | undefined;
+    anchorPos: number;
+    headPos: number;
+    mediaOptions: MediaOptions;
+} & WrappedComponentProps>> & {
+    WrappedComponent: React.ComponentType<{
+        forwardRef?: ((ref: HTMLElement) => void) | undefined;
+        node: PMNode;
+        view: EditorView;
+        getPos: () => number | undefined;
+        disabled?: boolean | undefined;
+        editorViewMode?: boolean | undefined;
+        allowLazyLoading?: boolean | undefined;
+        mediaProvider: Promise<MediaProvider>;
+        contextIdentifierProvider?: Promise<ContextIdentifierProvider> | undefined;
+        isCopyPasteEnabled?: boolean | undefined;
+        anchorPos: number;
+        headPos: number;
+        mediaOptions: MediaOptions;
+    } & WrappedComponentProps>;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "1.36.5",
+	"version": "1.37.0",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,14 +32,14 @@
 		"./types": "./src/types.ts"
 	},
 	"dependencies": {
-		"@atlaskit/adf-schema": "^42.0.2",
+		"@atlaskit/adf-schema": "^42.3.1",
 		"@atlaskit/analytics-namespaced-context": "^6.12.0",
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/button": "^20.2.0",
-		"@atlaskit/editor-common": "^93.6.0",
+		"@atlaskit/editor-common": "^94.0.0",
 		"@atlaskit/editor-palette": "1.6.1",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
-		"@atlaskit/editor-plugin-annotation": "1.21.1",
+		"@atlaskit/editor-plugin-annotation": "1.21.2",
 		"@atlaskit/editor-plugin-decorations": "^1.3.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^2.1.0",
@@ -53,7 +53,7 @@
 		"@atlaskit/editor-shared-styles": "^3.0.0",
 		"@atlaskit/editor-tables": "^2.8.0",
 		"@atlaskit/form": "^10.5.0",
-		"@atlaskit/icon": "^22.22.0",
+		"@atlaskit/icon": "^22.23.0",
 		"@atlaskit/media-card": "^78.7.0",
 		"@atlaskit/media-client": "^28.0.0",
 		"@atlaskit/media-client-react": "^2.2.0",