@atlaskit/editor-plugin-media 1.29.8 → 1.30.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-plugin-media
 
+## 1.30.0
+
+### Minor Changes
+
+- [#137821](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137821)
+  [`e26174c7d02a6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e26174c7d02a6) -
+  ED-24631 Refactor how ExternalImageBadge and CommentBadge are rendered
+
+### Patch Changes
+
+- [#138118](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/138118)
+  [`5e4d9eb1aefe4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5e4d9eb1aefe4) -
+  NOISSUE: Upgrades editor React peer dependencies to v18
+- Updated dependencies
+
+## 1.29.9
+
+### Patch Changes
+
+- [#135555](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/135555)
+  [`b7c55014a5c15`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b7c55014a5c15) -
+  add batch steps for media node attributes update
+
 ## 1.29.8
 
 ### Patch Changes

package/dist/cjs/nodeviews/mediaNodeUpdater.js

@@ -15,7 +15,9 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _mediaClient = require("@atlaskit/media-client");
 var _mediaClientReact = require("@atlaskit/media-client-react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _helpers = require("../commands/helpers");
+var _batchMediaNodeAttrs = require("../utils/batchMediaNodeAttrs");
 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 isMediaTypeSupported = function isMediaTypeSupported(type) {
@@ -46,9 +48,18 @@ var MediaNodeUpdater = exports.MediaNodeUpdater = /*#__PURE__*/function () {
             return _this.getObjectId();
           case 6:
             objectId = _context.sent;
-            (0, _helpers.updateAllMediaNodesAttrs)(id, {
-              __contextId: objectId
-            })(_this.props.view.state, _this.props.view.dispatch);
+            if ((0, _platformFeatureFlags.fg)('platform_editor_media_batch_updates')) {
+              (0, _batchMediaNodeAttrs.batchMediaNodeAttrsUpdate)(_this.props.view, {
+                id: id,
+                nextAttributes: {
+                  __contextId: objectId
+                }
+              });
+            } else {
+              (0, _helpers.updateAllMediaNodesAttrs)(id, {
+                __contextId: objectId
+              })(_this.props.view.state, _this.props.view.dispatch);
+            }
           case 8:
           case "end":
             return _context.stop();
@@ -172,7 +183,14 @@ var MediaNodeUpdater = exports.MediaNodeUpdater = /*#__PURE__*/function () {
             newAttrs = _context4.sent;
             _ref5 = _this.getAttrs(), id = _ref5.id;
             if (id && newAttrs) {
-              (0, _helpers.updateAllMediaNodesAttrs)(id, newAttrs)(_this.props.view.state, _this.props.view.dispatch);
+              if ((0, _platformFeatureFlags.fg)('platform_editor_media_batch_updates')) {
+                (0, _batchMediaNodeAttrs.batchMediaNodeAttrsUpdate)(_this.props.view, {
+                  id: id,
+                  nextAttributes: newAttrs
+                });
+              } else {
+                (0, _helpers.updateAllMediaNodesAttrs)(id, newAttrs)(_this.props.view.state, _this.props.view.dispatch);
+              }
             }
           case 5:
           case "end":
@@ -304,10 +322,20 @@ var MediaNodeUpdater = exports.MediaNodeUpdater = /*#__PURE__*/function () {
       return attrs.__contextId || null;
     });
     (0, _defineProperty2.default)(this, "updateDimensions", function (dimensions) {
-      (0, _helpers.updateAllMediaNodesAttrs)(dimensions.id, {
-        height: dimensions.height,
-        width: dimensions.width
-      })(_this.props.view.state, _this.props.view.dispatch);
+      if ((0, _platformFeatureFlags.fg)('platform_editor_media_batch_updates')) {
+        (0, _batchMediaNodeAttrs.batchMediaNodeAttrsUpdate)(_this.props.view, {
+          id: dimensions.id,
+          nextAttributes: {
+            height: dimensions.height,
+            width: dimensions.width
+          }
+        });
+      } else {
+        (0, _helpers.updateAllMediaNodesAttrs)(dimensions.id, {
+          height: dimensions.height,
+          width: dimensions.width
+        })(_this.props.view.state, _this.props.view.dispatch);
+      }
     });
     (0, _defineProperty2.default)(this, "hasDifferentContextId", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee8() {
       var nodeContextId, currentContextId;

package/dist/cjs/nodeviews/mediaSingle.js

@@ -48,6 +48,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
  * @jsxRuntime classic
  * @jsx jsx
+ * @jsxFrag
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var figureWrapperStyles = (0, _react2.css)({
   margin: 0
@@ -72,7 +73,6 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "mediaSingleWrapperRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "captionPlaceHolderRef", /*#__PURE__*/_react.default.createRef());
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "commentBadgeRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createOrUpdateMediaNodeUpdater", function (props) {
       var node = _this.props.node.firstChild;
       var updaterProps = _objectSpread(_objectSpread({}, props), {}, {
@@ -332,12 +332,7 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _mediaOptions$getEdit,
-        _pluginInjectionApi$m,
-        _node$firstChild,
-        _this2 = this,
-        _mediaOptions$getEdit3,
-        _mediaOptions$getEdit4;
+      var _mediaOptions$getEdit, _pluginInjectionApi$m, _node$firstChild, _mediaOptions$getEdit2;
       var _this$props2 = this.props,
         selected = _this$props2.selected,
         getPos = _this$props2.getPos,
@@ -431,9 +426,9 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
       var canResize = !!this.props.mediaOptions.allowResizing && !editorDisabled && !editorViewMode;
       if (!this.props.mediaOptions.allowResizingInTables) {
         // If resizing not allowed in tables, check parents for tables
-        var pos = getPos();
-        if (pos) {
-          var $pos = state.doc.resolve(pos);
+        var _pos = getPos();
+        if (_pos) {
+          var $pos = state.doc.resolve(_pos);
           var table = state.schema.nodes.table;
           var disabledNode = !!(0, _utils2.findParentNodeOfTypeClosestToPos)($pos, [table]);
           canResize = canResize && !disabledNode;
@@ -454,33 +449,14 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
         shouldShowPlaceholder = !editorDisabled && shouldShowPlaceholder;
       }
       var isCurrentNodeDrafting = (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.isDrafting) && (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.targetNodeId) === (node === null || node === void 0 || (_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.attrs.id);
-      var insertMediaPluginPhaseOneFeatureFlag = (0, _platformFeatureFlags.fg)('platform_editor_insert_media_plugin_phase_one');
-      var shouldShowExternalMediaBadge = attrs.type === 'external' && attrs.__external && insertMediaPluginPhaseOneFeatureFlag;
-      var commentBadgeOffset = function commentBadgeOffset() {
-        if (_this2.commentBadgeRef.current) {
-          var _mediaOptions$getEdit2;
-          var commentsOnMediaBugFixEnabled = mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit2 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit2 === void 0 || (_mediaOptions$getEdit2 = _mediaOptions$getEdit2.call(mediaOptions)) === null || _mediaOptions$getEdit2 === void 0 ? void 0 : _mediaOptions$getEdit2.commentsOnMediaBugFix;
-          var commentBadgeWidth = _this2.commentBadgeRef.current.offsetWidth;
-          var isMediaInsideTable = function isMediaInsideTable() {
-            var pos = getPos();
-            if (pos !== undefined) {
-              var _$pos2 = view.state.doc.resolve(pos);
-              var _table2 = view.state.schema.nodes.table;
-              var foundTableNode = (0, _utils2.findParentNodeOfTypeClosestToPos)(_$pos2, [_table2]);
-              return Boolean(foundTableNode);
-            }
-            return false;
-          };
-          if (commentsOnMediaBugFixEnabled && isMediaInsideTable()) {
-            return commentBadgeWidth + 2;
-          }
-          return commentBadgeWidth + 14;
-        }
-        return 0;
-      };
+      var shouldShowExternalMediaBadge = attrs.type === 'external';
+      var pos = getPos();
+      var isInsideTable = pos !== undefined && (0, _utils2.findParentNodeOfTypeClosestToPos)(state.doc.resolve(pos), [state.schema.nodes.table]);
       var currentMediaElement = function currentMediaElement() {
-        var pos = getPos();
-        return view.domAtPos(pos + 1).node;
+        if (pos !== undefined) {
+          return view.domAtPos(pos + 1).node;
+        }
+        return null;
       };
       var MediaChildren = (0, _react2.jsx)("figure", {
         ref: this.mediaSingleWrapperRef,
@@ -489,29 +465,32 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
         ,
         className: _styles.MediaSingleNodeSelector,
         onClick: this.onMediaSingleClicked
-      }, shouldShowExternalMediaBadge && (0, _react2.jsx)(_mediaSingle.ExternalImageBadge, {
-        commentBadgeRightOffset: commentBadgeOffset(),
+      }, (0, _platformFeatureFlags.fg)('platform_editor_insert_media_plugin_phase_one') && (0, _react2.jsx)(_mediaSingle.MediaBadges, {
         mediaElement: currentMediaElement(),
         mediaHeight: height,
-        mediaWidth: width
-      }), commentsOnMedia && (insertMediaPluginPhaseOneFeatureFlag ? (0, _react2.jsx)(_CommentBadge.CommentBadgeWithRef, {
-        ref: this.commentBadgeRef,
-        commentsOnMediaBugFixEnabled: mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit3 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit3 === void 0 || (_mediaOptions$getEdit3 = _mediaOptions$getEdit3.call(mediaOptions)) === null || _mediaOptions$getEdit3 === void 0 ? void 0 : _mediaOptions$getEdit3.commentsOnMediaBugFix,
+        mediaWidth: width,
+        extendedResizeOffset: (0, _platformFeatureFlags.fg)('platform.editor.media.extended-resize-experience') && !isInsideTable
+      }, function (_ref6) {
+        var badgeSize = _ref6.badgeSize;
+        return (0, _react2.jsx)(_react.default.Fragment, null, shouldShowExternalMediaBadge && (0, _react2.jsx)(_mediaSingle.ExternalImageBadge, {
+          badgeSize: badgeSize
+        }), commentsOnMedia && (0, _react2.jsx)(_CommentBadge.CommentBadgeNextWrapper, {
+          view: view,
+          api: pluginInjectionApi,
+          mediaNode: node === null || node === void 0 ? void 0 : node.firstChild,
+          getPos: getPos,
+          isDrafting: isCurrentNodeDrafting,
+          badgeSize: badgeSize
+        }));
+      }), !(0, _platformFeatureFlags.fg)('platform_editor_insert_media_plugin_phase_one') && commentsOnMedia && (0, _react2.jsx)(_CommentBadge.CommentBadge, {
+        commentsOnMediaBugFixEnabled: mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit2 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit2 === void 0 || (_mediaOptions$getEdit2 = _mediaOptions$getEdit2.call(mediaOptions)) === null || _mediaOptions$getEdit2 === void 0 ? void 0 : _mediaOptions$getEdit2.commentsOnMediaBugFix,
         view: view,
         api: pluginInjectionApi,
         mediaNode: node === null || node === void 0 ? void 0 : node.firstChild,
         badgeOffsetRight: badgeOffsetRight,
         getPos: getPos,
         isDrafting: isCurrentNodeDrafting
-      }) : (0, _react2.jsx)(_CommentBadge.CommentBadge, {
-        commentsOnMediaBugFixEnabled: mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit4 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit4 === void 0 || (_mediaOptions$getEdit4 = _mediaOptions$getEdit4.call(mediaOptions)) === null || _mediaOptions$getEdit4 === void 0 ? void 0 : _mediaOptions$getEdit4.commentsOnMediaBugFix,
-        view: view,
-        api: pluginInjectionApi,
-        mediaNode: node === null || node === void 0 ? void 0 : node.firstChild,
-        badgeOffsetRight: badgeOffsetRight,
-        getPos: getPos,
-        isDrafting: isCurrentNodeDrafting
-      })), (0, _react2.jsx)("div", {
+      }), (0, _react2.jsx)("div", {
         ref: this.props.forwardRef
       }), shouldShowPlaceholder && (0, _react2.jsx)(_CaptionPlaceholder.default, {
         ref: this.captionPlaceHolderRef,
@@ -537,19 +516,19 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
   mediaOptions: {}
 });
 (0, _defineProperty2.default)(MediaSingleNode, "displayName", 'MediaSingleNode');
-var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
-  var pluginInjectionApi = _ref6.pluginInjectionApi,
-    contextIdentifierProvider = _ref6.contextIdentifierProvider,
-    node = _ref6.node,
-    getPos = _ref6.getPos,
-    mediaOptions = _ref6.mediaOptions,
-    view = _ref6.view,
-    fullWidthMode = _ref6.fullWidthMode,
-    selected = _ref6.selected,
-    eventDispatcher = _ref6.eventDispatcher,
-    dispatchAnalyticsEvent = _ref6.dispatchAnalyticsEvent,
-    forwardRef = _ref6.forwardRef,
-    editorAppearance = _ref6.editorAppearance;
+var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref7) {
+  var pluginInjectionApi = _ref7.pluginInjectionApi,
+    contextIdentifierProvider = _ref7.contextIdentifierProvider,
+    node = _ref7.node,
+    getPos = _ref7.getPos,
+    mediaOptions = _ref7.mediaOptions,
+    view = _ref7.view,
+    fullWidthMode = _ref7.fullWidthMode,
+    selected = _ref7.selected,
+    eventDispatcher = _ref7.eventDispatcher,
+    dispatchAnalyticsEvent = _ref7.dispatchAnalyticsEvent,
+    forwardRef = _ref7.forwardRef,
+    editorAppearance = _ref7.editorAppearance;
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width', 'media', 'annotation', 'editorDisabled', 'editorViewMode']),
     widthState = _useSharedPluginState.widthState,
     mediaState = _useSharedPluginState.mediaState,
@@ -585,18 +564,18 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
   (0, _inherits2.default)(MediaSingleNodeView, _ReactNodeView);
   var _super2 = _createSuper(MediaSingleNodeView);
   function MediaSingleNodeView() {
-    var _this3;
+    var _this2;
     (0, _classCallCheck2.default)(this, MediaSingleNodeView);
     for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
       args[_key2] = arguments[_key2];
     }
-    _this3 = _super2.call.apply(_super2, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this3), "lastOffsetLeft", 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this3), "forceViewUpdate", false);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this3), "selectionType", null);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this3), "checkAndUpdateSelectionType", function () {
-      var getPos = _this3.getPos;
-      var selection = _this3.view.state.selection;
+    _this2 = _super2.call.apply(_super2, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "lastOffsetLeft", 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "forceViewUpdate", false);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "selectionType", null);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "checkAndUpdateSelectionType", function () {
+      var getPos = _this2.getPos;
+      var selection = _this2.view.state.selection;
 
       /**
        *  ED-19831
@@ -609,15 +588,15 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
       } catch (e) {
         pos = undefined;
       }
-      var isNodeSelected = (0, _utils.isNodeSelectedOrInRange)(selection.$anchor.pos, selection.$head.pos, pos, _this3.node.nodeSize);
-      _this3.selectionType = isNodeSelected;
+      var isNodeSelected = (0, _utils.isNodeSelectedOrInRange)(selection.$anchor.pos, selection.$head.pos, pos, _this2.node.nodeSize);
+      _this2.selectionType = isNodeSelected;
       return isNodeSelected;
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this3), "isNodeSelected", function () {
-      _this3.checkAndUpdateSelectionType();
-      return _this3.selectionType !== null;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "isNodeSelected", function () {
+      _this2.checkAndUpdateSelectionType();
+      return _this2.selectionType !== null;
     });
-    return _this3;
+    return _this2;
   }
   (0, _createClass2.default)(MediaSingleNodeView, [{
     key: "createDomRef",
@@ -682,10 +661,10 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "update",
     value: function update(node, decorations, _innerDecorations, isValidUpdate) {
-      var _this4 = this;
+      var _this3 = this;
       if (!isValidUpdate) {
         isValidUpdate = function isValidUpdate(currentNode, newNode) {
-          return _this4.getNodeMediaId(currentNode) === _this4.getNodeMediaId(newNode);
+          return _this3.getNodeMediaId(currentNode) === _this3.getNodeMediaId(newNode);
         };
       }
       return (0, _get2.default)((0, _getPrototypeOf2.default)(MediaSingleNodeView.prototype), "update", this).call(this, node, decorations, _innerDecorations, isValidUpdate);
@@ -693,7 +672,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "render",
     value: function render(props, forwardRef) {
-      var _this5 = this;
+      var _this4 = this;
       var _this$reactComponentP = this.reactComponentProps,
         eventDispatcher = _this$reactComponentP.eventDispatcher,
         fullWidthMode = _this$reactComponentP.fullWidthMode,
@@ -708,17 +687,17 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
       return (0, _react2.jsx)(_providerFactory.WithProviders, {
         providers: ['contextIdentifierProvider'],
         providerFactory: providerFactory,
-        renderNode: function renderNode(_ref7) {
-          var contextIdentifierProvider = _ref7.contextIdentifierProvider;
+        renderNode: function renderNode(_ref8) {
+          var contextIdentifierProvider = _ref8.contextIdentifierProvider;
           return (0, _react2.jsx)(MediaSingleNodeWrapper, {
             pluginInjectionApi: pluginInjectionApi,
             contextIdentifierProvider: contextIdentifierProvider,
-            node: _this5.node,
+            node: _this4.node,
             getPos: getPos,
             mediaOptions: mediaOptions,
-            view: _this5.view,
+            view: _this4.view,
             fullWidthMode: fullWidthMode,
-            selected: _this5.isNodeSelected,
+            selected: _this4.isNodeSelected,
             eventDispatcher: eventDispatcher,
             dispatchAnalyticsEvent: dispatchAnalyticsEvent,
             forwardRef: forwardRef,

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

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CommentBadgeWithRef = exports.CommentBadge = void 0;
+exports.CommentBadgeNextWrapper = exports.CommentBadge = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
@@ -77,17 +77,19 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref) {
 };
 var CommentBadge = exports.CommentBadge = (0, _reactIntlNext.injectIntl)(CommentBadgeWrapper);
 
-// This is a copy of above component with adding forwardRef.
-// Clean this up when removing fg('platform_editor_insert_media_plugin_phase_one') flag.
-var CommentBadgeWithRef = exports.CommentBadgeWithRef = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
+/**
+ * Remove CommentBadgeWrapper component above
+ * and rename CommentBadgeNextWrapper to CommentBadgeWrapper
+ * when clean up platform_editor_insert_media_plugin_phase_one feature flag
+ */
+
+var CommentBadgeNextWrapper = exports.CommentBadgeNextWrapper = function CommentBadgeNextWrapper(_ref2) {
   var api = _ref2.api,
     mediaNode = _ref2.mediaNode,
     view = _ref2.view,
     getPos = _ref2.getPos,
     isDrafting = _ref2.isDrafting,
-    badgeOffsetRight = _ref2.badgeOffsetRight,
-    commentsOnMediaBugFixEnabled = _ref2.commentsOnMediaBugFixEnabled;
-  var intl = (0, _reactIntlNext.useIntl)();
+    badgeSize = _ref2.badgeSize;
   var _useState3 = (0, _react.useState)(false),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     entered = _useState4[0],
@@ -123,21 +125,16 @@ var CommentBadgeWithRef = exports.CommentBadgeWithRef = /*#__PURE__*/(0, _react.
     return null;
   }
   var mediaSingleElement = view.domAtPos(pos + 1).node;
-  return /*#__PURE__*/_react.default.createElement(_mediaSingle.CommentBadge, {
-    ref: ref,
-    commentsOnMediaBugFixEnabled: commentsOnMediaBugFixEnabled,
-    badgeOffsetRight: badgeOffsetRight,
-    width: mediaNode.attrs.width,
-    height: mediaNode.attrs.height,
+  return /*#__PURE__*/_react.default.createElement(_mediaSingle.CommentBadgeNext, {
     onClick: onClick,
     mediaSingleElement: mediaSingleElement,
-    intl: intl,
     status: entered ? 'entered' : status,
     onMouseEnter: function onMouseEnter() {
       return setEntered(true);
     },
     onMouseLeave: function onMouseLeave() {
       return setEntered(false);
-    }
+    },
+    badgeSize: badgeSize
   });
-});
+};

package/dist/cjs/utils/batchMediaNodeAttrs.js

@@ -0,0 +1,161 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.runUpdateDebounced = exports.runUpdate = exports.containsSameAttributes = exports.batchMediaNodeAttrsUpdate = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+var _memoize = _interopRequireDefault(require("lodash/memoize"));
+var _batchSteps = require("./batchSteps");
+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; }
+/**
+ * 🧱 Internal: Editor FE Platform
+ * Based on https://github.com/lodash/lodash/issues/2403#issuecomment-1706130395
+ *
+ * Creates a debounced function that delays invoking the provided function until after a specified
+ * wait time has elapsed since the last time the debounced function was invoked. Additionally, the
+ * debounced function is memoized so that the same function instance is used for each unique set
+ * of arguments based on the resolver.
+ *
+ * This is particularly useful in scenarios where you want to debounce function calls while ensuring
+ * that each unique input combination receives its own debounced function instance. It's a combination
+ * of lodash's `debounce` and `memoize`.
+ *
+ * @template T
+ * @param {T} func - The function to debounce.
+ * @param {number} [wait=0] - The number of milliseconds to delay.
+ * @param {Object} [options] - The options object to pass to `debounce`.
+ * @param {Function} [resolver] - The function to resolve the cache key for memoization.
+ * @returns {Function} A new debounced and memoized function.
+ *
+ * @example
+ * const debouncedFunction = memoizeDebounce(myFunction, 300, { leading: true }, myResolver);
+ * debouncedFunction(arg1, arg2);
+ */
+function memoizeDebounce(func) {
+  var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var options = arguments.length > 2 ? arguments[2] : undefined;
+  var resolver = arguments.length > 3 ? arguments[3] : undefined;
+  var mem = (0, _memoize.default)(function () {
+    return (0, _debounce.default)(func, wait, options);
+  }, resolver);
+  return function () {
+    return mem.apply(void 0, arguments).apply(void 0, arguments);
+  };
+}
+var mediaAttributesCache = new WeakMap();
+var debouncedTime = 500;
+var containsSameAttributes = exports.containsSameAttributes = function containsSameAttributes(a, b) {
+  // a contains b, and want to check if attributes in b are same in a
+  return Object.entries(b).every(function (_ref) {
+    var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+      bkey = _ref2[0],
+      bValue = _ref2[1];
+    if (bkey in a) {
+      var aValue = a[bkey];
+      // Check if types match before comparing values
+      return (0, _typeof2.default)(aValue) === (0, _typeof2.default)(bValue) && aValue === bValue;
+    }
+    return false;
+  });
+};
+
+/**
+ * Updates media node attributes in the editor view based on the provided cache.
+ *
+ * @param {EditorView} editorView - The editor view instance where the updates will be applied.
+ * @param {MediaAttributesCache} cache - The cache containing media attributes to be updated.
+ *
+ * This function performs the following steps:
+ * 1. Retrieves the media attributes to update from the cache for the given editor view.
+ * 2. Clears the media attributes cache for the editor view.
+ * 3. Searches for media nodes in the document and collects their positions and new attributes.
+ * 4. If there are any media nodes to update, it applies the updates in a batch.
+ */
+var runUpdate = exports.runUpdate = function runUpdate(editorView, cache) {
+  var toUpdateValues = cache.get(editorView) || {};
+  // clear the media attributes cache per editor view
+  cache.delete(editorView);
+  var ids = Object.keys(toUpdateValues);
+  var state = editorView.state;
+  var mediaSteps = [];
+
+  // search node positions by id
+  state.doc.descendants(function (node, position) {
+    if (![node.type.schema.nodes.media, node.type.schema.nodes.mediaInline].includes(node.type)) {
+      return true;
+    }
+    if (!ids.includes(node.attrs.id)) {
+      return false;
+    }
+    var attrs = toUpdateValues[node.attrs.id];
+    if (containsSameAttributes(node.attrs, attrs)) {
+      return false;
+    }
+    mediaSteps.push({
+      position: position,
+      nodeType: node.type.name,
+      attrs: attrs
+    });
+  });
+  if (mediaSteps.length > 0) {
+    (0, _batchSteps.batchStepsUpdate)(editorView, mediaSteps);
+  }
+};
+
+/**
+ * Creates a debounced version of the `runUpdate` function to update media node attributes in the editor view.
+ *
+ * @constant
+ * @type {Function}
+ * @param {Function} runUpdate - The function to be debounced.
+ * @param {number} debouncedTime - The debounce delay in milliseconds.
+ * @param {Object} [options] - The debounce options. Defaults to {leading: false, trailing: true}.
+ * @param {Function} keyResolver - A function that returns the key to be used for memoization. In this case, it returns the editor view instance.
+ *
+ * This function performs the following steps:
+ * 1. Debounces the `runUpdate` function with the specified delay and options.
+ * 2. Uses the editor view instance as the key for memoization to ensure that updates are applied correctly.
+ */
+var runUpdateDebounced = exports.runUpdateDebounced = memoizeDebounce(runUpdate, debouncedTime,
+/**
+ * Use the default debounce options:
+ * {leading: false, trailing: true}
+ */
+undefined, function (view) {
+  /**
+   * EditorView is a singleton.
+   * There is only one instance per Editor.
+   */
+  return view;
+});
+
+/**
+ * Updates the media node attributes cache for the given editor view and triggers a debounced update.
+ *
+ * @param {EditorView} editorView - The editor view instance where the updates will be applied.
+ * @param {Props} props - The properties containing the media node ID and the next attributes to be updated.
+ *
+ * This function performs the following steps:
+ * 1. Retrieves the media attributes cache for the given editor view.
+ * 2. If no cache exists, initializes a new cache.
+ * 3. Updates the cache with the new attributes for the specified media node ID.
+ * 4. Sets the updated cache back to the media attributes cache.
+ * 5. Triggers a debounced update to apply the changes in the editor view.
+ */
+var batchMediaNodeAttrsUpdate = exports.batchMediaNodeAttrsUpdate = function batchMediaNodeAttrsUpdate(editorView, props) {
+  var cachePerView = mediaAttributesCache.get(editorView);
+  if (!cachePerView) {
+    cachePerView = {
+      records: {}
+    };
+  }
+  cachePerView[props.id] = _objectSpread(_objectSpread({}, cachePerView[props.id] || {}), props.nextAttributes);
+  mediaAttributesCache.set(editorView, cachePerView);
+  runUpdateDebounced(editorView, mediaAttributesCache);
+};

package/dist/cjs/utils/batchSteps.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.batchStepsUpdate = void 0;
+var _steps = require("@atlaskit/adf-schema/steps");
+/**
+ * Applies a batch of attribute update steps to media nodes in the editor view.
+ *
+ * @param {EditorView} editorView - The editor view instance where the updates will be applied.
+ * @param {BatchAttrsStepData[]} steps - An array of steps containing the positions and new attributes for media nodes.
+ * @returns {boolean} - Returns false if no steps were applied or if the document remains unchanged after applying the steps.
+ *
+ * This function performs the following steps:
+ * 1. Creates a new transaction from the current editor state.
+ * 2. If there are no steps to apply, it returns false.
+ * 3. Adds a new `BatchAttrsStep` to the transaction with the provided steps.
+ * 4. If the transaction has no steps or the document remains unchanged, it returns false.
+ * 5. Dispatches the transaction to apply the updates to the editor view.
+ *
+ * TODO: use pluginInjectionAPI to batch updates from a command in a separate PR later
+ */
+var batchStepsUpdate = exports.batchStepsUpdate = function batchStepsUpdate(editorView, steps) {
+  var state = editorView.state,
+    dispatch = editorView.dispatch;
+  var tr = state.tr;
+  if (steps.length === 0) {
+    return false;
+  }
+  tr.step(new _steps.BatchAttrsStep(steps));
+  if (tr.steps.length > 0 && tr.doc.eq(state.doc)) {
+    return false;
+  }
+  dispatch(tr);
+};