@atlaskit/editor-plugin-media 1.29.7 → 1.29.9

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-media
 
+## 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
+
+- [#131403](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/131403)
+  [`1ac0252dbed37`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1ac0252dbed37) -
+  [ED-24665] Fire analytics event for media insert via file browser
+
 ## 1.29.7
 
 ### 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/pm-plugins/main.js

@@ -331,6 +331,8 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
           return _analytics.INPUT_METHOD.CLIPBOARD;
         case 'dropzone':
           return _analytics.INPUT_METHOD.DRAG_AND_DROP;
+        case 'browser':
+          return _analytics.INPUT_METHOD.BROWSER;
       }
       return;
     });

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);
+};

package/dist/es2019/nodeviews/mediaNodeUpdater.js

@@ -4,7 +4,9 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/anal
 import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
 import { getAttrsFromUrl, isImageRepresentationReady, isMediaBlobUrl } from '@atlaskit/media-client';
 import { getMediaClient } from '@atlaskit/media-client-react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { replaceExternalMedia, updateAllMediaNodesAttrs, updateCurrentMediaNodeAttrs, updateMediaNodeAttrs } from '../commands/helpers';
+import { batchMediaNodeAttrsUpdate } from '../utils/batchMediaNodeAttrs';
 const isMediaTypeSupported = type => {
   if (type) {
     return ['image', 'file'].includes(type);
@@ -23,9 +25,18 @@ export class MediaNodeUpdater {
         id
       } = attrs;
       const objectId = await this.getObjectId();
-      updateAllMediaNodesAttrs(id, {
-        __contextId: objectId
-      })(this.props.view.state, this.props.view.dispatch);
+      if (fg('platform_editor_media_batch_updates')) {
+        batchMediaNodeAttrsUpdate(this.props.view, {
+          id: id,
+          nextAttributes: {
+            __contextId: objectId
+          }
+        });
+      } else {
+        updateAllMediaNodesAttrs(id, {
+          __contextId: objectId
+        })(this.props.view.state, this.props.view.dispatch);
+      }
     });
     _defineProperty(this, "updateNodeContextId", async getPos => {
       const attrs = this.getAttrs();
@@ -89,7 +100,14 @@ export class MediaNodeUpdater {
         id
       } = this.getAttrs();
       if (id && newAttrs) {
-        updateAllMediaNodesAttrs(id, newAttrs)(this.props.view.state, this.props.view.dispatch);
+        if (fg('platform_editor_media_batch_updates')) {
+          batchMediaNodeAttrsUpdate(this.props.view, {
+            id: id,
+            nextAttributes: newAttrs
+          });
+        } else {
+          updateAllMediaNodesAttrs(id, newAttrs)(this.props.view.state, this.props.view.dispatch);
+        }
       }
     });
     _defineProperty(this, "updateNodeAttrs", async getPos => {
@@ -163,10 +181,20 @@ export class MediaNodeUpdater {
       return attrs.__contextId || null;
     });
     _defineProperty(this, "updateDimensions", dimensions => {
-      updateAllMediaNodesAttrs(dimensions.id, {
-        height: dimensions.height,
-        width: dimensions.width
-      })(this.props.view.state, this.props.view.dispatch);
+      if (fg('platform_editor_media_batch_updates')) {
+        batchMediaNodeAttrsUpdate(this.props.view, {
+          id: dimensions.id,
+          nextAttributes: {
+            height: dimensions.height,
+            width: dimensions.width
+          }
+        });
+      } else {
+        updateAllMediaNodesAttrs(dimensions.id, {
+          height: dimensions.height,
+          width: dimensions.width
+        })(this.props.view.state, this.props.view.dispatch);
+      }
     });
     _defineProperty(this, "hasDifferentContextId", async () => {
       const nodeContextId = this.getNodeContextId();

package/dist/es2019/pm-plugins/main.js

@@ -290,6 +290,8 @@ export class MediaPluginStateImplementation {
           return INPUT_METHOD.CLIPBOARD;
         case 'dropzone':
           return INPUT_METHOD.DRAG_AND_DROP;
+        case 'browser':
+          return INPUT_METHOD.BROWSER;
       }
       return;
     });

package/dist/es2019/utils/batchMediaNodeAttrs.js

@@ -0,0 +1,149 @@
+import debounce from 'lodash/debounce';
+import memoize from 'lodash/memoize';
+import { batchStepsUpdate } from './batchSteps';
+
+/**
+ * 🧱 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, wait = 0, options, resolver) {
+  const mem = memoize(function () {
+    return debounce(func, wait, options);
+  }, resolver);
+  return function (...args) {
+    return mem(...args)(...args);
+  };
+}
+const mediaAttributesCache = new WeakMap();
+const debouncedTime = 500;
+export const containsSameAttributes = (a, b) => {
+  // a contains b, and want to check if attributes in b are same in a
+  return Object.entries(b).every(([bkey, bValue]) => {
+    if (bkey in a) {
+      const aValue = a[bkey];
+      // Check if types match before comparing values
+      return typeof aValue === typeof 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.
+ */
+export const runUpdate = (editorView, cache) => {
+  const toUpdateValues = cache.get(editorView) || {};
+  // clear the media attributes cache per editor view
+  cache.delete(editorView);
+  const ids = Object.keys(toUpdateValues);
+  const {
+    state
+  } = editorView;
+  const mediaSteps = [];
+
+  // search node positions by id
+  state.doc.descendants((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;
+    }
+    const attrs = toUpdateValues[node.attrs.id];
+    if (containsSameAttributes(node.attrs, attrs)) {
+      return false;
+    }
+    mediaSteps.push({
+      position,
+      nodeType: node.type.name,
+      attrs
+    });
+  });
+  if (mediaSteps.length > 0) {
+    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.
+ */
+export const runUpdateDebounced = memoizeDebounce(runUpdate, debouncedTime,
+/**
+ * Use the default debounce options:
+ * {leading: false, trailing: true}
+ */
+undefined, 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.
+ */
+export const batchMediaNodeAttrsUpdate = (editorView, props) => {
+  let cachePerView = mediaAttributesCache.get(editorView);
+  if (!cachePerView) {
+    cachePerView = {
+      records: {}
+    };
+  }
+  cachePerView[props.id] = {
+    ...(cachePerView[props.id] || {}),
+    ...props.nextAttributes
+  };
+  mediaAttributesCache.set(editorView, cachePerView);
+  runUpdateDebounced(editorView, mediaAttributesCache);
+};

package/dist/es2019/utils/batchSteps.js

@@ -0,0 +1,32 @@
+import { BatchAttrsStep } from '@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
+ */
+export const batchStepsUpdate = (editorView, steps) => {
+  const {
+    state,
+    dispatch
+  } = editorView;
+  const tr = state.tr;
+  if (steps.length === 0) {
+    return false;
+  }
+  tr.step(new BatchAttrsStep(steps));
+  if (tr.steps.length > 0 && tr.doc.eq(state.doc)) {
+    return false;
+  }
+  dispatch(tr);
+};

package/dist/esm/nodeviews/mediaNodeUpdater.js

@@ -10,7 +10,9 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/anal
 import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
 import { getAttrsFromUrl, isImageRepresentationReady, isMediaBlobUrl as _isMediaBlobUrl } from '@atlaskit/media-client';
 import { getMediaClient } from '@atlaskit/media-client-react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { replaceExternalMedia, updateAllMediaNodesAttrs, updateCurrentMediaNodeAttrs, updateMediaNodeAttrs } from '../commands/helpers';
+import { batchMediaNodeAttrsUpdate } from '../utils/batchMediaNodeAttrs';
 var isMediaTypeSupported = function isMediaTypeSupported(type) {
   if (type) {
     return ['image', 'file'].includes(type);
@@ -39,9 +41,18 @@ export var MediaNodeUpdater = /*#__PURE__*/function () {
             return _this.getObjectId();
           case 6:
             objectId = _context.sent;
-            updateAllMediaNodesAttrs(id, {
-              __contextId: objectId
-            })(_this.props.view.state, _this.props.view.dispatch);
+            if (fg('platform_editor_media_batch_updates')) {
+              batchMediaNodeAttrsUpdate(_this.props.view, {
+                id: id,
+                nextAttributes: {
+                  __contextId: objectId
+                }
+              });
+            } else {
+              updateAllMediaNodesAttrs(id, {
+                __contextId: objectId
+              })(_this.props.view.state, _this.props.view.dispatch);
+            }
           case 8:
           case "end":
             return _context.stop();
@@ -165,7 +176,14 @@ export var MediaNodeUpdater = /*#__PURE__*/function () {
             newAttrs = _context4.sent;
             _ref5 = _this.getAttrs(), id = _ref5.id;
             if (id && newAttrs) {
-              updateAllMediaNodesAttrs(id, newAttrs)(_this.props.view.state, _this.props.view.dispatch);
+              if (fg('platform_editor_media_batch_updates')) {
+                batchMediaNodeAttrsUpdate(_this.props.view, {
+                  id: id,
+                  nextAttributes: newAttrs
+                });
+              } else {
+                updateAllMediaNodesAttrs(id, newAttrs)(_this.props.view.state, _this.props.view.dispatch);
+              }
             }
           case 5:
           case "end":
@@ -297,10 +315,20 @@ export var MediaNodeUpdater = /*#__PURE__*/function () {
       return attrs.__contextId || null;
     });
     _defineProperty(this, "updateDimensions", function (dimensions) {
-      updateAllMediaNodesAttrs(dimensions.id, {
-        height: dimensions.height,
-        width: dimensions.width
-      })(_this.props.view.state, _this.props.view.dispatch);
+      if (fg('platform_editor_media_batch_updates')) {
+        batchMediaNodeAttrsUpdate(_this.props.view, {
+          id: dimensions.id,
+          nextAttributes: {
+            height: dimensions.height,
+            width: dimensions.width
+          }
+        });
+      } else {
+        updateAllMediaNodesAttrs(dimensions.id, {
+          height: dimensions.height,
+          width: dimensions.width
+        })(_this.props.view.state, _this.props.view.dispatch);
+      }
     });
     _defineProperty(this, "hasDifferentContextId", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
       var nodeContextId, currentContextId;

package/dist/esm/pm-plugins/main.js

@@ -316,6 +316,8 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
           return INPUT_METHOD.CLIPBOARD;
         case 'dropzone':
           return INPUT_METHOD.DRAG_AND_DROP;
+        case 'browser':
+          return INPUT_METHOD.BROWSER;
       }
       return;
     });

package/dist/esm/utils/batchMediaNodeAttrs.js

@@ -0,0 +1,155 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _typeof from "@babel/runtime/helpers/typeof";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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 debounce from 'lodash/debounce';
+import memoize from 'lodash/memoize';
+import { batchStepsUpdate } from './batchSteps';
+
+/**
+ * 🧱 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 = memoize(function () {
+    return debounce(func, wait, options);
+  }, resolver);
+  return function () {
+    return mem.apply(void 0, arguments).apply(void 0, arguments);
+  };
+}
+var mediaAttributesCache = new WeakMap();
+var debouncedTime = 500;
+export var 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 = _slicedToArray(_ref, 2),
+      bkey = _ref2[0],
+      bValue = _ref2[1];
+    if (bkey in a) {
+      var aValue = a[bkey];
+      // Check if types match before comparing values
+      return _typeof(aValue) === _typeof(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.
+ */
+export var 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) {
+    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.
+ */
+export var 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.
+ */
+export var 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/esm/utils/batchSteps.js

@@ -0,0 +1,30 @@
+import { BatchAttrsStep } from '@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
+ */
+export var 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 BatchAttrsStep(steps));
+  if (tr.steps.length > 0 && tr.doc.eq(state.doc)) {
+    return false;
+  }
+  dispatch(tr);
+};

package/dist/types/utils/batchMediaNodeAttrs.d.ts

@@ -0,0 +1,54 @@
+import { type MediaAttributes } from '@atlaskit/adf-schema';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+type MediaId = string;
+type Props = {
+    id: MediaId;
+    nextAttributes: Partial<MediaAttributes>;
+};
+export type MediaAttributesMap = Record<MediaId, Partial<MediaAttributes>>;
+type MediaAttributesCachePerView = MediaAttributesMap;
+export type MediaAttributesCache = WeakMap<EditorView, MediaAttributesCachePerView>;
+export declare const containsSameAttributes: (a: MediaAttributes, b: Partial<MediaAttributes>) => boolean;
+/**
+ * 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.
+ */
+export declare const runUpdate: (editorView: EditorView, cache: MediaAttributesCache) => void;
+/**
+ * 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.
+ */
+export declare const runUpdateDebounced: (editorView: EditorView, cache: MediaAttributesCache) => void | undefined;
+/**
+ * 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.
+ */
+export declare const batchMediaNodeAttrsUpdate: (editorView: EditorView, props: Props) => void;
+export {};

package/dist/types/utils/batchSteps.d.ts

@@ -0,0 +1,19 @@
+import { type BatchAttrsStepData } from '@atlaskit/adf-schema/steps';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+/**
+ * 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
+ */
+export declare const batchStepsUpdate: (editorView: EditorView, steps: BatchAttrsStepData[]) => false | undefined;

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

@@ -0,0 +1,54 @@
+import { type MediaAttributes } from '@atlaskit/adf-schema';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+type MediaId = string;
+type Props = {
+    id: MediaId;
+    nextAttributes: Partial<MediaAttributes>;
+};
+export type MediaAttributesMap = Record<MediaId, Partial<MediaAttributes>>;
+type MediaAttributesCachePerView = MediaAttributesMap;
+export type MediaAttributesCache = WeakMap<EditorView, MediaAttributesCachePerView>;
+export declare const containsSameAttributes: (a: MediaAttributes, b: Partial<MediaAttributes>) => boolean;
+/**
+ * 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.
+ */
+export declare const runUpdate: (editorView: EditorView, cache: MediaAttributesCache) => void;
+/**
+ * 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.
+ */
+export declare const runUpdateDebounced: (editorView: EditorView, cache: MediaAttributesCache) => void | undefined;
+/**
+ * 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.
+ */
+export declare const batchMediaNodeAttrsUpdate: (editorView: EditorView, props: Props) => void;
+export {};

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

@@ -0,0 +1,19 @@
+import { type BatchAttrsStepData } from '@atlaskit/adf-schema/steps';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+/**
+ * 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
+ */
+export declare const batchStepsUpdate: (editorView: EditorView, steps: BatchAttrsStepData[]) => false | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "1.29.7",
+	"version": "1.29.9",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -37,7 +37,7 @@
 		"@atlaskit/analytics-namespaced-context": "^6.11.0",
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/button": "^20.1.0",
-		"@atlaskit/editor-common": "^88.2.0",
+		"@atlaskit/editor-common": "^88.5.0",
 		"@atlaskit/editor-palette": "1.6.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",
 		"@atlaskit/editor-plugin-annotation": "1.19.3",
@@ -55,9 +55,9 @@
 		"@atlaskit/editor-tables": "^2.8.0",
 		"@atlaskit/form": "^10.5.0",
 		"@atlaskit/icon": "^22.15.0",
-		"@atlaskit/media-card": "^78.1.0",
-		"@atlaskit/media-client": "^27.5.0",
-		"@atlaskit/media-client-react": "^2.1.0",
+		"@atlaskit/media-card": "^78.2.0",
+		"@atlaskit/media-client": "^27.6.0",
+		"@atlaskit/media-client-react": "^2.2.0",
 		"@atlaskit/media-common": "^11.4.0",
 		"@atlaskit/media-filmstrip": "^47.2.0",
 		"@atlaskit/media-picker": "^66.5.0",
@@ -149,6 +149,9 @@
 		},
 		"platform_editor_insert_media_plugin_phase_one": {
 			"type": "boolean"
+		},
+		"platform_editor_media_batch_updates": {
+			"type": "boolean"
 		}
 	},
 	"stricter": {