@atlaskit/editor-plugin-media 12.1.5 → 12.2.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-media
 
+## 12.2.0
+
+### Minor Changes
+
+- [`a0b1822615d7e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a0b1822615d7e) -
+  Refactor inline editor AI image generation loading state to use ProseMirror decorations:
+  - Add AI generating decoration plugin to editor-plugin-media for transient visual state tracking
+    via ProseMirror decorations instead of ADF schema attributes
+  - Remove \_\_isAIGenerating transient attribute from ADF media node schema
+  - Update editor-rovo-bridge to dispatch decoration meta instead of mutating node attributes
+  - Media NodeView reads decoration state and passes isAIGenerating prop to media-card
+  - AIBorder component with pulsing gradient border and translucent blanket during AI image
+    generation
+  - Internationalized AI generating progress bar aria label
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.1.5
 
 ### Patch Changes

package/dist/cjs/mediaPlugin.js

@@ -27,6 +27,7 @@ var _media = require("./nodeviews/toDOM-fixes/media");
 var _mediaGroup = require("./nodeviews/toDOM-fixes/mediaGroup");
 var _mediaInline = require("./nodeviews/toDOM-fixes/mediaInline");
 var _mediaSingle2 = require("./nodeviews/toDOM-fixes/mediaSingle");
+var _aiGeneratingDecoration = require("./pm-plugins/ai-generating-decoration");
 var _altText = require("./pm-plugins/alt-text");
 var _keymap = _interopRequireDefault(require("./pm-plugins/alt-text/keymap"));
 var _commands = require("./pm-plugins/commands");
@@ -180,6 +181,8 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
       showMediaViewer: _commands.showMediaViewer,
       hideMediaViewer: _commands.hideMediaViewer,
       trackMediaPaste: _commands.trackMediaPaste,
+      setAIGenerating: _commands.setAIGenerating,
+      clearAIGenerating: _commands.clearAIGenerating,
       insertMediaSingle: (0, _commands.insertMediaAsMediaSingleCommand)(api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, options.allowPixelResizing)
     },
     nodes: function nodes() {
@@ -305,6 +308,12 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
           plugin: _pixelResizing.createPlugin
         });
       }
+      pmPlugins.push({
+        name: 'mediaAIGeneratingDecoration',
+        plugin: function plugin() {
+          return (0, _aiGeneratingDecoration.createAIGeneratingDecorationPlugin)();
+        }
+      });
       pmPlugins.push({
         name: 'mediaSelectionHandler',
         plugin: function plugin() {

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

@@ -23,6 +23,7 @@ var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _mediaClient = require("@atlaskit/media-client");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _aiGeneratingDecoration = require("../../pm-plugins/ai-generating-decoration");
 var _helpers = require("../../pm-plugins/commands/helpers");
 var _mediaCommon = require("../../pm-plugins/utils/media-common");
 var _media = _interopRequireDefault(require("./media"));
@@ -62,6 +63,7 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
     }
     _this = _callSuper(this, MediaNodeView, [].concat(args));
     (0, _defineProperty2.default)(_this, "isSelected", false);
+    (0, _defineProperty2.default)(_this, "isAIGenerating", false);
     (0, _defineProperty2.default)(_this, "hasBeenResized", false);
     (0, _defineProperty2.default)(_this, "hasResizedListener", function () {
       if (!_this.hasBeenResized) {
@@ -178,7 +180,8 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
           mediaOptions: mediaOptions,
           onExternalImageLoaded: _this.onExternalImageLoaded,
           isViewOnly: ((_this$reactComponentP = _this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP === void 0 || (_this$reactComponentP = _this$reactComponentP.editorViewMode) === null || _this$reactComponentP === void 0 || (_this$reactComponentP = _this$reactComponentP.sharedState.currentState()) === null || _this$reactComponentP === void 0 ? void 0 : _this$reactComponentP.mode) === 'view',
-          pluginInjectionApi: _this.reactComponentProps.pluginInjectionApi
+          pluginInjectionApi: _this.reactComponentProps.pluginInjectionApi,
+          isAIGenerating: _this.isAIGenerating
         });
       };
     });
@@ -268,6 +271,11 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
         this.isSelected = hasMediaNodeSelectedDecoration;
         return true;
       }
+      var aiGenerating = (0, _aiGeneratingDecoration.hasAIGeneratingDecoration)(decorations);
+      if (this.isAIGenerating !== aiGenerating) {
+        this.isAIGenerating = aiGenerating;
+        return true;
+      }
       if (this.node.attrs !== nextNode.attrs) {
         return true;
       }

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

@@ -181,7 +181,7 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
     value: function shouldComponentUpdate(nextProps, nextState) {
       var hasNewViewMediaClientConfig = !this.state.viewMediaClientConfig && nextState.viewMediaClientConfig;
       var hasNewViewAndUploadMediaClientConfig = !this.state.viewAndUploadMediaClientConfig && nextState.viewAndUploadMediaClientConfig;
-      if (this.props.selected !== nextProps.selected || this.props.node.attrs.id !== nextProps.node.attrs.id || this.props.node.attrs.collection !== nextProps.node.attrs.collection || this.props.maxDimensions.height !== nextProps.maxDimensions.height || this.props.maxDimensions.width !== nextProps.maxDimensions.width || this.props.contextIdentifierProvider !== nextProps.contextIdentifierProvider || this.props.isLoading !== nextProps.isLoading || this.props.mediaProvider !== nextProps.mediaProvider || (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true) && this.props.syncProvider !== nextProps.syncProvider || hasNewViewMediaClientConfig || hasNewViewAndUploadMediaClientConfig) {
+      if (this.props.selected !== nextProps.selected || this.props.node.attrs.id !== nextProps.node.attrs.id || this.props.node.attrs.collection !== nextProps.node.attrs.collection || this.props.isAIGenerating !== nextProps.isAIGenerating || this.props.maxDimensions.height !== nextProps.maxDimensions.height || this.props.maxDimensions.width !== nextProps.maxDimensions.width || this.props.contextIdentifierProvider !== nextProps.contextIdentifierProvider || this.props.isLoading !== nextProps.isLoading || this.props.mediaProvider !== nextProps.mediaProvider || (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true) && this.props.syncProvider !== nextProps.syncProvider || hasNewViewMediaClientConfig || hasNewViewAndUploadMediaClientConfig) {
         return true;
       }
       return false;
@@ -391,6 +391,7 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
         videoControlsWrapperRef: this.videoControlsWrapperRef,
         ssr: ssr,
         mediaSettings: this.getMediaSettings(viewAndUploadMediaClientConfig),
+        isAIGenerating: !!this.props.isAIGenerating,
         onError: (0, _expValEquals.expValEquals)('platform_editor_media_error_analytics', 'isEnabled', true) ? this.onError : undefined
       })));
     }

package/dist/cjs/pm-plugins/ai-generating-decoration.js

@@ -0,0 +1,180 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.aiGeneratingDecorationPluginKey = void 0;
+exports.clearAIGeneratingMeta = clearAIGeneratingMeta;
+exports.createAIGeneratingDecorationPlugin = createAIGeneratingDecorationPlugin;
+exports.hasAIGeneratingDecoration = hasAIGeneratingDecoration;
+exports.setAIGeneratingMeta = setAIGeneratingMeta;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _view = require("@atlaskit/editor-prosemirror/view");
+var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
+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; }
+/**
+ * ProseMirror plugin that manages AI-generating decorations on media nodes.
+ *
+ * Instead of storing transient `__isAIGenerating` attributes in the ADF schema
+ * (which pollutes the document model and undo history), this plugin uses
+ * ProseMirror decorations — a view-layer-only mechanism that never affects the
+ * document content, serialization, or undo/redo stack.
+ */
+
+// ── Plugin Key ──────────────────────────────────────────────────────────────
+
+var aiGeneratingDecorationPluginKey = exports.aiGeneratingDecorationPluginKey = new _state.PluginKey('aiGeneratingDecoration');
+
+// ── Types ───────────────────────────────────────────────────────────────────
+
+var AI_GENERATING_DECORATION_TYPE = 'ai-generating';
+
+// ── Helpers ─────────────────────────────────────────────────────────────────
+
+/**
+ * Build a DecorationSet containing a Decoration.node for every media node
+ * whose `id` is in the given set.
+ */
+function buildDecorationSet(doc, mediaIds) {
+  if (mediaIds.size === 0) {
+    return _view.DecorationSet.empty;
+  }
+  var decorations = [];
+  doc.descendants(function (node, pos) {
+    if (node.type.name === 'media' && mediaIds.has(node.attrs.id)) {
+      decorations.push(_view.Decoration.node(pos, pos + node.nodeSize, {},
+      // no DOM attrs needed — the NodeView reads the decoration spec
+      {
+        type: AI_GENERATING_DECORATION_TYPE,
+        mediaId: node.attrs.id
+      }));
+    }
+  });
+  return _view.DecorationSet.create(doc, decorations);
+}
+
+// ── Public utilities ────────────────────────────────────────────────────────
+
+/**
+ * Returns `true` if the given decorations array contains an AI-generating
+ * decoration. Call this from a NodeView's `update()` / `viewShouldUpdate()`
+ * to determine whether to render the AI border.
+ */
+function hasAIGeneratingDecoration(decorations) {
+  return decorations.some(function (d) {
+    return d.spec.type === AI_GENERATING_DECORATION_TYPE;
+  });
+}
+
+/**
+ * Dispatch a transaction that sets the AI-generating decoration on a media
+ * node identified by `mediaId`.
+ *
+ * Usage from the editor bridge:
+ * ```
+ * editorAPI.core.actions.execute(({ tr }) =>
+ *   setAIGeneratingMeta(tr, mediaId),
+ * );
+ * ```
+ */
+function setAIGeneratingMeta(tr, mediaId) {
+  return tr.setMeta(aiGeneratingDecorationPluginKey, {
+    type: 'SET_GENERATING',
+    mediaId: mediaId
+  }).setMeta('addToHistory', false);
+}
+
+/**
+ * Dispatch a transaction that clears the AI-generating decoration for a
+ * specific media node.
+ */
+function clearAIGeneratingMeta(tr, mediaId) {
+  return tr.setMeta(aiGeneratingDecorationPluginKey, {
+    type: 'CLEAR_GENERATING',
+    mediaId: mediaId
+  }).setMeta('addToHistory', false);
+}
+
+// ── Plugin ──────────────────────────────────────────────────────────────────
+
+/** Creates the ProseMirror plugin that manages AI-generating decorations on media nodes. */
+function createAIGeneratingDecorationPlugin() {
+  return new _safePlugin.SafePlugin({
+    key: aiGeneratingDecorationPluginKey,
+    state: {
+      init: function init() {
+        return {
+          generatingMediaIds: new Set(),
+          decorationSet: _view.DecorationSet.empty
+        };
+      },
+      apply: function apply(tr, pluginState, _oldState, newState) {
+        // Killswitch — if active, clear any existing decorations and stop
+        // eslint-disable-next-line @atlaskit/platform/use-recommended-utils -- dynamic config killswitch, not a standard feature gate
+        if (_featureGateJsClient.default.getExperimentValue('maui_ai_border_killswitch', 'value', false)) {
+          if (pluginState.generatingMediaIds.size > 0) {
+            return {
+              generatingMediaIds: new Set(),
+              decorationSet: _view.DecorationSet.empty
+            };
+          }
+          return pluginState;
+        }
+        var meta = tr.getMeta(aiGeneratingDecorationPluginKey);
+        if (meta) {
+          switch (meta.type) {
+            case 'SET_GENERATING':
+              {
+                var ids = new Set(pluginState.generatingMediaIds);
+                ids.add(meta.mediaId);
+                return {
+                  generatingMediaIds: ids,
+                  decorationSet: buildDecorationSet(newState.doc, ids)
+                };
+              }
+            case 'CLEAR_GENERATING':
+              {
+                var _ids = new Set(pluginState.generatingMediaIds);
+                _ids.delete(meta.mediaId);
+                return {
+                  generatingMediaIds: _ids,
+                  decorationSet: buildDecorationSet(newState.doc, _ids)
+                };
+              }
+            case 'CLEAR_ALL':
+              return {
+                generatingMediaIds: new Set(),
+                decorationSet: _view.DecorationSet.empty
+              };
+          }
+        }
+
+        // Map decorations through document changes so positions stay in sync
+        if (tr.docChanged && pluginState.decorationSet !== _view.DecorationSet.empty) {
+          try {
+            return _objectSpread(_objectSpread({}, pluginState), {}, {
+              decorationSet: pluginState.decorationSet.map(tr.mapping, newState.doc)
+            });
+          } catch (_unused) {
+            // Collaborative editing edge case — reset
+            return {
+              generatingMediaIds: new Set(),
+              decorationSet: _view.DecorationSet.empty
+            };
+          }
+        }
+        return pluginState;
+      }
+    },
+    props: {
+      decorations: function decorations(state) {
+        var _aiGeneratingDecorati, _aiGeneratingDecorati2;
+        return (_aiGeneratingDecorati = (_aiGeneratingDecorati2 = aiGeneratingDecorationPluginKey.getState(state)) === null || _aiGeneratingDecorati2 === void 0 ? void 0 : _aiGeneratingDecorati2.decorationSet) !== null && _aiGeneratingDecorati !== void 0 ? _aiGeneratingDecorati : _view.DecorationSet.empty;
+      }
+    }
+  });
+}

package/dist/cjs/pm-plugins/commands.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.trackMediaPaste = exports.showMediaViewer = exports.insertMediaAsMediaSingleCommand = exports.hideMediaViewer = void 0;
+exports.trackMediaPaste = exports.showMediaViewer = exports.setAIGenerating = exports.insertMediaAsMediaSingleCommand = exports.hideMediaViewer = exports.clearAIGenerating = void 0;
 var _actions = require("../pm-plugins/actions");
+var _aiGeneratingDecoration = require("../pm-plugins/ai-generating-decoration");
 var _pluginKey = require("../pm-plugins/plugin-key");
 var _mediaCommon = require("../pm-plugins/utils/media-common");
 var _mediaSingle = require("./utils/media-single");
@@ -39,6 +40,31 @@ var trackMediaPaste = exports.trackMediaPaste = function trackMediaPaste(attrs)
     return tr;
   };
 };
+
+/**
+ * Sets the AI-generating decoration on a media node identified by `mediaId`.
+ * The decoration triggers the AI border visual on the media's NodeView.
+ *
+ * Decorations live in the view layer only and never affect the document model
+ * or undo/redo history.
+ */
+var setAIGenerating = exports.setAIGenerating = function setAIGenerating(mediaId) {
+  return function (_ref4) {
+    var tr = _ref4.tr;
+    return (0, _aiGeneratingDecoration.setAIGeneratingMeta)(tr, mediaId);
+  };
+};
+
+/**
+ * Clears the AI-generating decoration for a specific media node identified by
+ * `mediaId`. Removes the AI border visual from that media's NodeView.
+ */
+var clearAIGenerating = exports.clearAIGenerating = function clearAIGenerating(mediaId) {
+  return function (_ref5) {
+    var tr = _ref5.tr;
+    return (0, _aiGeneratingDecoration.clearAIGeneratingMeta)(tr, mediaId);
+  };
+};
 var insertMediaAsMediaSingleCommand = exports.insertMediaAsMediaSingleCommand = function insertMediaAsMediaSingleCommand(editorAnalyticsAPI, allowPixelResizing) {
   return function (mediaAttrs, inputMethod, insertMediaVia) {
     return (0, _mediaSingle.createInsertMediaAsMediaSingleCommand)(mediaAttrs, inputMethod, editorAnalyticsAPI, insertMediaVia, allowPixelResizing);

package/dist/es2019/mediaPlugin.js

@@ -18,9 +18,10 @@ import { mediaSpecWithFixedToDOM } from './nodeviews/toDOM-fixes/media';
 import { mediaGroupSpecWithFixedToDOM } from './nodeviews/toDOM-fixes/mediaGroup';
 import { mediaInlineSpecWithFixedToDOM } from './nodeviews/toDOM-fixes/mediaInline';
 import { mediaSingleSpecWithFixedToDOM } from './nodeviews/toDOM-fixes/mediaSingle';
+import { createAIGeneratingDecorationPlugin } from './pm-plugins/ai-generating-decoration';
 import { createPlugin as createMediaAltTextPlugin } from './pm-plugins/alt-text';
 import keymapMediaAltTextPlugin from './pm-plugins/alt-text/keymap';
-import { hideMediaViewer, insertMediaAsMediaSingleCommand, showMediaViewer, trackMediaPaste } from './pm-plugins/commands';
+import { clearAIGenerating, hideMediaViewer, insertMediaAsMediaSingleCommand, setAIGenerating, showMediaViewer, trackMediaPaste } from './pm-plugins/commands';
 import keymapPlugin from './pm-plugins/keymap';
 import keymapMediaSinglePlugin from './pm-plugins/keymap-media';
 import linkingPlugin from './pm-plugins/linking';
@@ -173,6 +174,8 @@ export const mediaPlugin = ({
       showMediaViewer,
       hideMediaViewer,
       trackMediaPaste,
+      setAIGenerating,
+      clearAIGenerating,
       insertMediaSingle: insertMediaAsMediaSingleCommand(api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, options.allowPixelResizing)
     },
     nodes() {
@@ -296,6 +299,10 @@ export const mediaPlugin = ({
           plugin: createMediaPixelResizingPlugin
         });
       }
+      pmPlugins.push({
+        name: 'mediaAIGeneratingDecoration',
+        plugin: () => createAIGeneratingDecorationPlugin()
+      });
       pmPlugins.push({
         name: 'mediaSelectionHandler',
         plugin: () => {

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

@@ -9,6 +9,7 @@ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared
 import { akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { getAttrsFromUrl } from '@atlaskit/media-client';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { hasAIGeneratingDecoration } from '../../pm-plugins/ai-generating-decoration';
 import { updateCurrentMediaNodeAttrs } from '../../pm-plugins/commands/helpers';
 import { isMediaBlobUrlFromAttrs } from '../../pm-plugins/utils/media-common';
 // Ignored via go/ees005
@@ -40,6 +41,7 @@ class MediaNodeView extends SelectionBasedNodeView {
   constructor(...args) {
     super(...args);
     _defineProperty(this, "isSelected", false);
+    _defineProperty(this, "isAIGenerating", false);
     _defineProperty(this, "hasBeenResized", false);
     _defineProperty(this, "hasResizedListener", () => {
       if (!this.hasBeenResized) {
@@ -167,7 +169,8 @@ class MediaNodeView extends SelectionBasedNodeView {
           mediaOptions: mediaOptions,
           onExternalImageLoaded: this.onExternalImageLoaded,
           isViewOnly: ((_this$reactComponentP = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP === void 0 ? void 0 : (_this$reactComponentP2 = _this$reactComponentP.editorViewMode) === null || _this$reactComponentP2 === void 0 ? void 0 : (_this$reactComponentP3 = _this$reactComponentP2.sharedState.currentState()) === null || _this$reactComponentP3 === void 0 ? void 0 : _this$reactComponentP3.mode) === 'view',
-          pluginInjectionApi: this.reactComponentProps.pluginInjectionApi
+          pluginInjectionApi: this.reactComponentProps.pluginInjectionApi,
+          isAIGenerating: this.isAIGenerating
         });
       };
     });
@@ -248,6 +251,11 @@ class MediaNodeView extends SelectionBasedNodeView {
       this.isSelected = hasMediaNodeSelectedDecoration;
       return true;
     }
+    const aiGenerating = hasAIGeneratingDecoration(decorations);
+    if (this.isAIGenerating !== aiGenerating) {
+      this.isAIGenerating = aiGenerating;
+      return true;
+    }
     if (this.node.attrs !== nextNode.attrs) {
       return true;
     }

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

@@ -150,7 +150,7 @@ export class MediaNode extends Component {
   shouldComponentUpdate(nextProps, nextState) {
     const hasNewViewMediaClientConfig = !this.state.viewMediaClientConfig && nextState.viewMediaClientConfig;
     const hasNewViewAndUploadMediaClientConfig = !this.state.viewAndUploadMediaClientConfig && nextState.viewAndUploadMediaClientConfig;
-    if (this.props.selected !== nextProps.selected || this.props.node.attrs.id !== nextProps.node.attrs.id || this.props.node.attrs.collection !== nextProps.node.attrs.collection || this.props.maxDimensions.height !== nextProps.maxDimensions.height || this.props.maxDimensions.width !== nextProps.maxDimensions.width || this.props.contextIdentifierProvider !== nextProps.contextIdentifierProvider || this.props.isLoading !== nextProps.isLoading || this.props.mediaProvider !== nextProps.mediaProvider || expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true) && this.props.syncProvider !== nextProps.syncProvider || hasNewViewMediaClientConfig || hasNewViewAndUploadMediaClientConfig) {
+    if (this.props.selected !== nextProps.selected || this.props.node.attrs.id !== nextProps.node.attrs.id || this.props.node.attrs.collection !== nextProps.node.attrs.collection || this.props.isAIGenerating !== nextProps.isAIGenerating || this.props.maxDimensions.height !== nextProps.maxDimensions.height || this.props.maxDimensions.width !== nextProps.maxDimensions.width || this.props.contextIdentifierProvider !== nextProps.contextIdentifierProvider || this.props.isLoading !== nextProps.isLoading || this.props.mediaProvider !== nextProps.mediaProvider || expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true) && this.props.syncProvider !== nextProps.syncProvider || hasNewViewMediaClientConfig || hasNewViewAndUploadMediaClientConfig) {
       return true;
     }
     return false;
@@ -332,6 +332,7 @@ export class MediaNode extends Component {
       videoControlsWrapperRef: this.videoControlsWrapperRef,
       ssr: ssr,
       mediaSettings: this.getMediaSettings(viewAndUploadMediaClientConfig),
+      isAIGenerating: !!this.props.isAIGenerating,
       onError: expValEquals('platform_editor_media_error_analytics', 'isEnabled', true) ? this.onError : undefined
     })));
   }

package/dist/es2019/pm-plugins/ai-generating-decoration.js

@@ -0,0 +1,166 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import FeatureGates from '@atlaskit/feature-gate-js-client';
+
+/**
+ * ProseMirror plugin that manages AI-generating decorations on media nodes.
+ *
+ * Instead of storing transient `__isAIGenerating` attributes in the ADF schema
+ * (which pollutes the document model and undo history), this plugin uses
+ * ProseMirror decorations — a view-layer-only mechanism that never affects the
+ * document content, serialization, or undo/redo stack.
+ */
+
+// ── Plugin Key ──────────────────────────────────────────────────────────────
+
+export const aiGeneratingDecorationPluginKey = new PluginKey('aiGeneratingDecoration');
+
+// ── Types ───────────────────────────────────────────────────────────────────
+
+const AI_GENERATING_DECORATION_TYPE = 'ai-generating';
+
+// ── Helpers ─────────────────────────────────────────────────────────────────
+
+/**
+ * Build a DecorationSet containing a Decoration.node for every media node
+ * whose `id` is in the given set.
+ */
+function buildDecorationSet(doc, mediaIds) {
+  if (mediaIds.size === 0) {
+    return DecorationSet.empty;
+  }
+  const decorations = [];
+  doc.descendants((node, pos) => {
+    if (node.type.name === 'media' && mediaIds.has(node.attrs.id)) {
+      decorations.push(Decoration.node(pos, pos + node.nodeSize, {},
+      // no DOM attrs needed — the NodeView reads the decoration spec
+      {
+        type: AI_GENERATING_DECORATION_TYPE,
+        mediaId: node.attrs.id
+      }));
+    }
+  });
+  return DecorationSet.create(doc, decorations);
+}
+
+// ── Public utilities ────────────────────────────────────────────────────────
+
+/**
+ * Returns `true` if the given decorations array contains an AI-generating
+ * decoration. Call this from a NodeView's `update()` / `viewShouldUpdate()`
+ * to determine whether to render the AI border.
+ */
+export function hasAIGeneratingDecoration(decorations) {
+  return decorations.some(d => d.spec.type === AI_GENERATING_DECORATION_TYPE);
+}
+
+/**
+ * Dispatch a transaction that sets the AI-generating decoration on a media
+ * node identified by `mediaId`.
+ *
+ * Usage from the editor bridge:
+ * ```
+ * editorAPI.core.actions.execute(({ tr }) =>
+ *   setAIGeneratingMeta(tr, mediaId),
+ * );
+ * ```
+ */
+export function setAIGeneratingMeta(tr, mediaId) {
+  return tr.setMeta(aiGeneratingDecorationPluginKey, {
+    type: 'SET_GENERATING',
+    mediaId
+  }).setMeta('addToHistory', false);
+}
+
+/**
+ * Dispatch a transaction that clears the AI-generating decoration for a
+ * specific media node.
+ */
+export function clearAIGeneratingMeta(tr, mediaId) {
+  return tr.setMeta(aiGeneratingDecorationPluginKey, {
+    type: 'CLEAR_GENERATING',
+    mediaId
+  }).setMeta('addToHistory', false);
+}
+
+// ── Plugin ──────────────────────────────────────────────────────────────────
+
+/** Creates the ProseMirror plugin that manages AI-generating decorations on media nodes. */
+export function createAIGeneratingDecorationPlugin() {
+  return new SafePlugin({
+    key: aiGeneratingDecorationPluginKey,
+    state: {
+      init() {
+        return {
+          generatingMediaIds: new Set(),
+          decorationSet: DecorationSet.empty
+        };
+      },
+      apply(tr, pluginState, _oldState, newState) {
+        // Killswitch — if active, clear any existing decorations and stop
+        // eslint-disable-next-line @atlaskit/platform/use-recommended-utils -- dynamic config killswitch, not a standard feature gate
+        if (FeatureGates.getExperimentValue('maui_ai_border_killswitch', 'value', false)) {
+          if (pluginState.generatingMediaIds.size > 0) {
+            return {
+              generatingMediaIds: new Set(),
+              decorationSet: DecorationSet.empty
+            };
+          }
+          return pluginState;
+        }
+        const meta = tr.getMeta(aiGeneratingDecorationPluginKey);
+        if (meta) {
+          switch (meta.type) {
+            case 'SET_GENERATING':
+              {
+                const ids = new Set(pluginState.generatingMediaIds);
+                ids.add(meta.mediaId);
+                return {
+                  generatingMediaIds: ids,
+                  decorationSet: buildDecorationSet(newState.doc, ids)
+                };
+              }
+            case 'CLEAR_GENERATING':
+              {
+                const ids = new Set(pluginState.generatingMediaIds);
+                ids.delete(meta.mediaId);
+                return {
+                  generatingMediaIds: ids,
+                  decorationSet: buildDecorationSet(newState.doc, ids)
+                };
+              }
+            case 'CLEAR_ALL':
+              return {
+                generatingMediaIds: new Set(),
+                decorationSet: DecorationSet.empty
+              };
+          }
+        }
+
+        // Map decorations through document changes so positions stay in sync
+        if (tr.docChanged && pluginState.decorationSet !== DecorationSet.empty) {
+          try {
+            return {
+              ...pluginState,
+              decorationSet: pluginState.decorationSet.map(tr.mapping, newState.doc)
+            };
+          } catch {
+            // Collaborative editing edge case — reset
+            return {
+              generatingMediaIds: new Set(),
+              decorationSet: DecorationSet.empty
+            };
+          }
+        }
+        return pluginState;
+      }
+    },
+    props: {
+      decorations(state) {
+        var _aiGeneratingDecorati, _aiGeneratingDecorati2;
+        return (_aiGeneratingDecorati = (_aiGeneratingDecorati2 = aiGeneratingDecorationPluginKey.getState(state)) === null || _aiGeneratingDecorati2 === void 0 ? void 0 : _aiGeneratingDecorati2.decorationSet) !== null && _aiGeneratingDecorati !== void 0 ? _aiGeneratingDecorati : DecorationSet.empty;
+      }
+    }
+  });
+}

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

@@ -1,4 +1,5 @@
 import { ACTIONS } from '../pm-plugins/actions';
+import { setAIGeneratingMeta, clearAIGeneratingMeta } from '../pm-plugins/ai-generating-decoration';
 import { stateKey } from '../pm-plugins/plugin-key';
 import { getIdentifier } from '../pm-plugins/utils/media-common';
 import { createInsertMediaAsMediaSingleCommand } from './utils/media-single';
@@ -32,4 +33,23 @@ export const trackMediaPaste = attrs => ({
   });
   return tr;
 };
+
+/**
+ * Sets the AI-generating decoration on a media node identified by `mediaId`.
+ * The decoration triggers the AI border visual on the media's NodeView.
+ *
+ * Decorations live in the view layer only and never affect the document model
+ * or undo/redo history.
+ */
+export const setAIGenerating = mediaId => ({
+  tr
+}) => setAIGeneratingMeta(tr, mediaId);
+
+/**
+ * Clears the AI-generating decoration for a specific media node identified by
+ * `mediaId`. Removes the AI border visual from that media's NodeView.
+ */
+export const clearAIGenerating = mediaId => ({
+  tr
+}) => clearAIGeneratingMeta(tr, mediaId);
 export const insertMediaAsMediaSingleCommand = (editorAnalyticsAPI, allowPixelResizing) => (mediaAttrs, inputMethod, insertMediaVia) => createInsertMediaAsMediaSingleCommand(mediaAttrs, inputMethod, editorAnalyticsAPI, insertMediaVia, allowPixelResizing);

package/dist/esm/mediaPlugin.js

@@ -21,9 +21,10 @@ import { mediaSpecWithFixedToDOM } from './nodeviews/toDOM-fixes/media';
 import { mediaGroupSpecWithFixedToDOM } from './nodeviews/toDOM-fixes/mediaGroup';
 import { mediaInlineSpecWithFixedToDOM } from './nodeviews/toDOM-fixes/mediaInline';
 import { mediaSingleSpecWithFixedToDOM } from './nodeviews/toDOM-fixes/mediaSingle';
+import { createAIGeneratingDecorationPlugin } from './pm-plugins/ai-generating-decoration';
 import { createPlugin as createMediaAltTextPlugin } from './pm-plugins/alt-text';
 import keymapMediaAltTextPlugin from './pm-plugins/alt-text/keymap';
-import { hideMediaViewer, insertMediaAsMediaSingleCommand, showMediaViewer, trackMediaPaste } from './pm-plugins/commands';
+import { clearAIGenerating, hideMediaViewer, insertMediaAsMediaSingleCommand, setAIGenerating, showMediaViewer, trackMediaPaste } from './pm-plugins/commands';
 import keymapPlugin from './pm-plugins/keymap';
 import keymapMediaSinglePlugin from './pm-plugins/keymap-media';
 import linkingPlugin from './pm-plugins/linking';
@@ -171,6 +172,8 @@ export var mediaPlugin = function mediaPlugin(_ref3) {
       showMediaViewer: showMediaViewer,
       hideMediaViewer: hideMediaViewer,
       trackMediaPaste: trackMediaPaste,
+      setAIGenerating: setAIGenerating,
+      clearAIGenerating: clearAIGenerating,
       insertMediaSingle: insertMediaAsMediaSingleCommand(api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, options.allowPixelResizing)
     },
     nodes: function nodes() {
@@ -296,6 +299,12 @@ export var mediaPlugin = function mediaPlugin(_ref3) {
           plugin: createMediaPixelResizingPlugin
         });
       }
+      pmPlugins.push({
+        name: 'mediaAIGeneratingDecoration',
+        plugin: function plugin() {
+          return createAIGeneratingDecorationPlugin();
+        }
+      });
       pmPlugins.push({
         name: 'mediaSelectionHandler',
         plugin: function plugin() {

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

@@ -22,6 +22,7 @@ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared
 import { akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { getAttrsFromUrl } from '@atlaskit/media-client';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { hasAIGeneratingDecoration } from '../../pm-plugins/ai-generating-decoration';
 import { updateCurrentMediaNodeAttrs } from '../../pm-plugins/commands/helpers';
 import { isMediaBlobUrlFromAttrs } from '../../pm-plugins/utils/media-common';
 // Ignored via go/ees005
@@ -56,6 +57,7 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
     }
     _this = _callSuper(this, MediaNodeView, [].concat(args));
     _defineProperty(_this, "isSelected", false);
+    _defineProperty(_this, "isAIGenerating", false);
     _defineProperty(_this, "hasBeenResized", false);
     _defineProperty(_this, "hasResizedListener", function () {
       if (!_this.hasBeenResized) {
@@ -172,7 +174,8 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
           mediaOptions: mediaOptions,
           onExternalImageLoaded: _this.onExternalImageLoaded,
           isViewOnly: ((_this$reactComponentP = _this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP === void 0 || (_this$reactComponentP = _this$reactComponentP.editorViewMode) === null || _this$reactComponentP === void 0 || (_this$reactComponentP = _this$reactComponentP.sharedState.currentState()) === null || _this$reactComponentP === void 0 ? void 0 : _this$reactComponentP.mode) === 'view',
-          pluginInjectionApi: _this.reactComponentProps.pluginInjectionApi
+          pluginInjectionApi: _this.reactComponentProps.pluginInjectionApi,
+          isAIGenerating: _this.isAIGenerating
         });
       };
     });
@@ -262,6 +265,11 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
         this.isSelected = hasMediaNodeSelectedDecoration;
         return true;
       }
+      var aiGenerating = hasAIGeneratingDecoration(decorations);
+      if (this.isAIGenerating !== aiGenerating) {
+        this.isAIGenerating = aiGenerating;
+        return true;
+      }
       if (this.node.attrs !== nextNode.attrs) {
         return true;
       }

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

@@ -173,7 +173,7 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
     value: function shouldComponentUpdate(nextProps, nextState) {
       var hasNewViewMediaClientConfig = !this.state.viewMediaClientConfig && nextState.viewMediaClientConfig;
       var hasNewViewAndUploadMediaClientConfig = !this.state.viewAndUploadMediaClientConfig && nextState.viewAndUploadMediaClientConfig;
-      if (this.props.selected !== nextProps.selected || this.props.node.attrs.id !== nextProps.node.attrs.id || this.props.node.attrs.collection !== nextProps.node.attrs.collection || this.props.maxDimensions.height !== nextProps.maxDimensions.height || this.props.maxDimensions.width !== nextProps.maxDimensions.width || this.props.contextIdentifierProvider !== nextProps.contextIdentifierProvider || this.props.isLoading !== nextProps.isLoading || this.props.mediaProvider !== nextProps.mediaProvider || expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true) && this.props.syncProvider !== nextProps.syncProvider || hasNewViewMediaClientConfig || hasNewViewAndUploadMediaClientConfig) {
+      if (this.props.selected !== nextProps.selected || this.props.node.attrs.id !== nextProps.node.attrs.id || this.props.node.attrs.collection !== nextProps.node.attrs.collection || this.props.isAIGenerating !== nextProps.isAIGenerating || this.props.maxDimensions.height !== nextProps.maxDimensions.height || this.props.maxDimensions.width !== nextProps.maxDimensions.width || this.props.contextIdentifierProvider !== nextProps.contextIdentifierProvider || this.props.isLoading !== nextProps.isLoading || this.props.mediaProvider !== nextProps.mediaProvider || expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true) && this.props.syncProvider !== nextProps.syncProvider || hasNewViewMediaClientConfig || hasNewViewAndUploadMediaClientConfig) {
         return true;
       }
       return false;
@@ -383,6 +383,7 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
         videoControlsWrapperRef: this.videoControlsWrapperRef,
         ssr: ssr,
         mediaSettings: this.getMediaSettings(viewAndUploadMediaClientConfig),
+        isAIGenerating: !!this.props.isAIGenerating,
         onError: expValEquals('platform_editor_media_error_analytics', 'isEnabled', true) ? this.onError : undefined
       })));
     }

package/dist/esm/pm-plugins/ai-generating-decoration.js

@@ -0,0 +1,170 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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 { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import FeatureGates from '@atlaskit/feature-gate-js-client';
+
+/**
+ * ProseMirror plugin that manages AI-generating decorations on media nodes.
+ *
+ * Instead of storing transient `__isAIGenerating` attributes in the ADF schema
+ * (which pollutes the document model and undo history), this plugin uses
+ * ProseMirror decorations — a view-layer-only mechanism that never affects the
+ * document content, serialization, or undo/redo stack.
+ */
+
+// ── Plugin Key ──────────────────────────────────────────────────────────────
+
+export var aiGeneratingDecorationPluginKey = new PluginKey('aiGeneratingDecoration');
+
+// ── Types ───────────────────────────────────────────────────────────────────
+
+var AI_GENERATING_DECORATION_TYPE = 'ai-generating';
+
+// ── Helpers ─────────────────────────────────────────────────────────────────
+
+/**
+ * Build a DecorationSet containing a Decoration.node for every media node
+ * whose `id` is in the given set.
+ */
+function buildDecorationSet(doc, mediaIds) {
+  if (mediaIds.size === 0) {
+    return DecorationSet.empty;
+  }
+  var decorations = [];
+  doc.descendants(function (node, pos) {
+    if (node.type.name === 'media' && mediaIds.has(node.attrs.id)) {
+      decorations.push(Decoration.node(pos, pos + node.nodeSize, {},
+      // no DOM attrs needed — the NodeView reads the decoration spec
+      {
+        type: AI_GENERATING_DECORATION_TYPE,
+        mediaId: node.attrs.id
+      }));
+    }
+  });
+  return DecorationSet.create(doc, decorations);
+}
+
+// ── Public utilities ────────────────────────────────────────────────────────
+
+/**
+ * Returns `true` if the given decorations array contains an AI-generating
+ * decoration. Call this from a NodeView's `update()` / `viewShouldUpdate()`
+ * to determine whether to render the AI border.
+ */
+export function hasAIGeneratingDecoration(decorations) {
+  return decorations.some(function (d) {
+    return d.spec.type === AI_GENERATING_DECORATION_TYPE;
+  });
+}
+
+/**
+ * Dispatch a transaction that sets the AI-generating decoration on a media
+ * node identified by `mediaId`.
+ *
+ * Usage from the editor bridge:
+ * ```
+ * editorAPI.core.actions.execute(({ tr }) =>
+ *   setAIGeneratingMeta(tr, mediaId),
+ * );
+ * ```
+ */
+export function setAIGeneratingMeta(tr, mediaId) {
+  return tr.setMeta(aiGeneratingDecorationPluginKey, {
+    type: 'SET_GENERATING',
+    mediaId: mediaId
+  }).setMeta('addToHistory', false);
+}
+
+/**
+ * Dispatch a transaction that clears the AI-generating decoration for a
+ * specific media node.
+ */
+export function clearAIGeneratingMeta(tr, mediaId) {
+  return tr.setMeta(aiGeneratingDecorationPluginKey, {
+    type: 'CLEAR_GENERATING',
+    mediaId: mediaId
+  }).setMeta('addToHistory', false);
+}
+
+// ── Plugin ──────────────────────────────────────────────────────────────────
+
+/** Creates the ProseMirror plugin that manages AI-generating decorations on media nodes. */
+export function createAIGeneratingDecorationPlugin() {
+  return new SafePlugin({
+    key: aiGeneratingDecorationPluginKey,
+    state: {
+      init: function init() {
+        return {
+          generatingMediaIds: new Set(),
+          decorationSet: DecorationSet.empty
+        };
+      },
+      apply: function apply(tr, pluginState, _oldState, newState) {
+        // Killswitch — if active, clear any existing decorations and stop
+        // eslint-disable-next-line @atlaskit/platform/use-recommended-utils -- dynamic config killswitch, not a standard feature gate
+        if (FeatureGates.getExperimentValue('maui_ai_border_killswitch', 'value', false)) {
+          if (pluginState.generatingMediaIds.size > 0) {
+            return {
+              generatingMediaIds: new Set(),
+              decorationSet: DecorationSet.empty
+            };
+          }
+          return pluginState;
+        }
+        var meta = tr.getMeta(aiGeneratingDecorationPluginKey);
+        if (meta) {
+          switch (meta.type) {
+            case 'SET_GENERATING':
+              {
+                var ids = new Set(pluginState.generatingMediaIds);
+                ids.add(meta.mediaId);
+                return {
+                  generatingMediaIds: ids,
+                  decorationSet: buildDecorationSet(newState.doc, ids)
+                };
+              }
+            case 'CLEAR_GENERATING':
+              {
+                var _ids = new Set(pluginState.generatingMediaIds);
+                _ids.delete(meta.mediaId);
+                return {
+                  generatingMediaIds: _ids,
+                  decorationSet: buildDecorationSet(newState.doc, _ids)
+                };
+              }
+            case 'CLEAR_ALL':
+              return {
+                generatingMediaIds: new Set(),
+                decorationSet: DecorationSet.empty
+              };
+          }
+        }
+
+        // Map decorations through document changes so positions stay in sync
+        if (tr.docChanged && pluginState.decorationSet !== DecorationSet.empty) {
+          try {
+            return _objectSpread(_objectSpread({}, pluginState), {}, {
+              decorationSet: pluginState.decorationSet.map(tr.mapping, newState.doc)
+            });
+          } catch (_unused) {
+            // Collaborative editing edge case — reset
+            return {
+              generatingMediaIds: new Set(),
+              decorationSet: DecorationSet.empty
+            };
+          }
+        }
+        return pluginState;
+      }
+    },
+    props: {
+      decorations: function decorations(state) {
+        var _aiGeneratingDecorati, _aiGeneratingDecorati2;
+        return (_aiGeneratingDecorati = (_aiGeneratingDecorati2 = aiGeneratingDecorationPluginKey.getState(state)) === null || _aiGeneratingDecorati2 === void 0 ? void 0 : _aiGeneratingDecorati2.decorationSet) !== null && _aiGeneratingDecorati !== void 0 ? _aiGeneratingDecorati : DecorationSet.empty;
+      }
+    }
+  });
+}

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

@@ -1,4 +1,5 @@
 import { ACTIONS } from '../pm-plugins/actions';
+import { setAIGeneratingMeta, clearAIGeneratingMeta } from '../pm-plugins/ai-generating-decoration';
 import { stateKey } from '../pm-plugins/plugin-key';
 import { getIdentifier } from '../pm-plugins/utils/media-common';
 import { createInsertMediaAsMediaSingleCommand } from './utils/media-single';
@@ -33,6 +34,31 @@ export var trackMediaPaste = function trackMediaPaste(attrs) {
     return tr;
   };
 };
+
+/**
+ * Sets the AI-generating decoration on a media node identified by `mediaId`.
+ * The decoration triggers the AI border visual on the media's NodeView.
+ *
+ * Decorations live in the view layer only and never affect the document model
+ * or undo/redo history.
+ */
+export var setAIGenerating = function setAIGenerating(mediaId) {
+  return function (_ref4) {
+    var tr = _ref4.tr;
+    return setAIGeneratingMeta(tr, mediaId);
+  };
+};
+
+/**
+ * Clears the AI-generating decoration for a specific media node identified by
+ * `mediaId`. Removes the AI border visual from that media's NodeView.
+ */
+export var clearAIGenerating = function clearAIGenerating(mediaId) {
+  return function (_ref5) {
+    var tr = _ref5.tr;
+    return clearAIGeneratingMeta(tr, mediaId);
+  };
+};
 export var insertMediaAsMediaSingleCommand = function insertMediaAsMediaSingleCommand(editorAnalyticsAPI, allowPixelResizing) {
   return function (mediaAttrs, inputMethod, insertMediaVia) {
     return createInsertMediaAsMediaSingleCommand(mediaAttrs, inputMethod, editorAnalyticsAPI, insertMediaVia, allowPixelResizing);

package/dist/types/mediaPluginType.d.ts

@@ -69,6 +69,11 @@ export type MediaNextEditorPluginType = NextEditorPlugin<'media', {
         setProvider: (provider: Promise<MediaProvider>) => boolean;
     };
     commands: {
+        /**
+         * Clears the AI-generating decoration for a specific media node identified by
+         * `mediaId`. Removes the AI border from that media node.
+         */
+        clearAIGenerating: (mediaId: string) => EditorCommand;
         hideMediaViewer: EditorCommand;
         /**
          * Inserts a media node as a media single.
@@ -79,6 +84,14 @@ export type MediaNextEditorPluginType = NextEditorPlugin<'media', {
          * @param insertMediaVia - Optional parameter indicating how the media was inserted
          */
         insertMediaSingle: (attrs: MediaADFAttrs, inputMethod: InputMethodInsertMedia, insertMediaVia?: InsertMediaVia) => EditorCommand;
+        /**
+         * Sets the AI-generating decoration on a media node identified by `mediaId`.
+         * Renders an AI border around the media node while AI is generating/replacing it.
+         *
+         * Decorations live in the view layer only and never affect the document model
+         * or undo/redo history.
+         */
+        setAIGenerating: (mediaId: string) => EditorCommand;
         showMediaViewer: (media: MediaADFAttrs) => EditorCommand;
         trackMediaPaste: (attrs: MediaADFAttrs) => EditorCommand;
     };

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

@@ -17,6 +17,7 @@ interface MediaNodeWithPluginStateComponentProps {
 }
 declare class MediaNodeView extends SelectionBasedNodeView<MediaNodeViewProps> {
     private isSelected;
+    private isAIGenerating;
     private hasBeenResized;
     private resizeListenerBinding?;
     getMediaSingleNode(getPos: getPosHandlerNode): PMNode | null;

package/dist/types/nodeviews/mediaNodeView/media.d.ts

@@ -15,6 +15,7 @@ export interface MediaNodeProps extends ReactNodeProps, ImageLoaderProps {
     api?: ExtractInjectionAPI<MediaNextEditorPluginType>;
     contextIdentifierProvider?: Promise<ContextIdentifierProvider>;
     getPos: ProsemirrorGetPosHandler;
+    isAIGenerating?: boolean;
     isLoading?: boolean;
     isMediaSingle?: boolean;
     isViewOnly?: boolean;

package/dist/types/pm-plugins/ai-generating-decoration.d.ts

@@ -0,0 +1,47 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+/**
+ * ProseMirror plugin that manages AI-generating decorations on media nodes.
+ *
+ * Instead of storing transient `__isAIGenerating` attributes in the ADF schema
+ * (which pollutes the document model and undo history), this plugin uses
+ * ProseMirror decorations — a view-layer-only mechanism that never affects the
+ * document content, serialization, or undo/redo stack.
+ */
+export declare const aiGeneratingDecorationPluginKey: PluginKey;
+export type AIGeneratingAction = {
+    mediaId: string;
+    type: 'SET_GENERATING';
+} | {
+    mediaId: string;
+    type: 'CLEAR_GENERATING';
+} | {
+    type: 'CLEAR_ALL';
+};
+/**
+ * Returns `true` if the given decorations array contains an AI-generating
+ * decoration. Call this from a NodeView's `update()` / `viewShouldUpdate()`
+ * to determine whether to render the AI border.
+ */
+export declare function hasAIGeneratingDecoration(decorations: readonly Decoration[]): boolean;
+/**
+ * Dispatch a transaction that sets the AI-generating decoration on a media
+ * node identified by `mediaId`.
+ *
+ * Usage from the editor bridge:
+ * ```
+ * editorAPI.core.actions.execute(({ tr }) =>
+ *   setAIGeneratingMeta(tr, mediaId),
+ * );
+ * ```
+ */
+export declare function setAIGeneratingMeta(tr: Transaction, mediaId: string): Transaction;
+/**
+ * Dispatch a transaction that clears the AI-generating decoration for a
+ * specific media node.
+ */
+export declare function clearAIGeneratingMeta(tr: Transaction, mediaId: string): Transaction;
+/** Creates the ProseMirror plugin that manages AI-generating decorations on media nodes. */
+export declare function createAIGeneratingDecorationPlugin(): SafePlugin;

package/dist/types/pm-plugins/commands.d.ts

@@ -4,4 +4,17 @@ import type { EditorCommand } from '@atlaskit/editor-common/types';
 export declare const showMediaViewer: (media: MediaADFAttrs) => EditorCommand;
 export declare const hideMediaViewer: EditorCommand;
 export declare const trackMediaPaste: (attrs: MediaADFAttrs) => EditorCommand;
+/**
+ * Sets the AI-generating decoration on a media node identified by `mediaId`.
+ * The decoration triggers the AI border visual on the media's NodeView.
+ *
+ * Decorations live in the view layer only and never affect the document model
+ * or undo/redo history.
+ */
+export declare const setAIGenerating: (mediaId: string) => EditorCommand;
+/**
+ * Clears the AI-generating decoration for a specific media node identified by
+ * `mediaId`. Removes the AI border visual from that media's NodeView.
+ */
+export declare const clearAIGenerating: (mediaId: string) => EditorCommand;
 export declare const insertMediaAsMediaSingleCommand: (editorAnalyticsAPI?: EditorAnalyticsAPI, allowPixelResizing?: boolean) => (mediaAttrs: MediaADFAttrs, inputMethod: InputMethodInsertMedia, insertMediaVia?: InsertMediaVia) => EditorCommand;

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

@@ -69,6 +69,11 @@ export type MediaNextEditorPluginType = NextEditorPlugin<'media', {
         setProvider: (provider: Promise<MediaProvider>) => boolean;
     };
     commands: {
+        /**
+         * Clears the AI-generating decoration for a specific media node identified by
+         * `mediaId`. Removes the AI border from that media node.
+         */
+        clearAIGenerating: (mediaId: string) => EditorCommand;
         hideMediaViewer: EditorCommand;
         /**
          * Inserts a media node as a media single.
@@ -79,6 +84,14 @@ export type MediaNextEditorPluginType = NextEditorPlugin<'media', {
          * @param insertMediaVia - Optional parameter indicating how the media was inserted
          */
         insertMediaSingle: (attrs: MediaADFAttrs, inputMethod: InputMethodInsertMedia, insertMediaVia?: InsertMediaVia) => EditorCommand;
+        /**
+         * Sets the AI-generating decoration on a media node identified by `mediaId`.
+         * Renders an AI border around the media node while AI is generating/replacing it.
+         *
+         * Decorations live in the view layer only and never affect the document model
+         * or undo/redo history.
+         */
+        setAIGenerating: (mediaId: string) => EditorCommand;
         showMediaViewer: (media: MediaADFAttrs) => EditorCommand;
         trackMediaPaste: (attrs: MediaADFAttrs) => EditorCommand;
     };

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

@@ -17,6 +17,7 @@ interface MediaNodeWithPluginStateComponentProps {
 }
 declare class MediaNodeView extends SelectionBasedNodeView<MediaNodeViewProps> {
     private isSelected;
+    private isAIGenerating;
     private hasBeenResized;
     private resizeListenerBinding?;
     getMediaSingleNode(getPos: getPosHandlerNode): PMNode | null;

package/dist/types-ts4.5/nodeviews/mediaNodeView/media.d.ts

@@ -15,6 +15,7 @@ export interface MediaNodeProps extends ReactNodeProps, ImageLoaderProps {
     api?: ExtractInjectionAPI<MediaNextEditorPluginType>;
     contextIdentifierProvider?: Promise<ContextIdentifierProvider>;
     getPos: ProsemirrorGetPosHandler;
+    isAIGenerating?: boolean;
     isLoading?: boolean;
     isMediaSingle?: boolean;
     isViewOnly?: boolean;

package/dist/types-ts4.5/pm-plugins/ai-generating-decoration.d.ts

@@ -0,0 +1,47 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+/**
+ * ProseMirror plugin that manages AI-generating decorations on media nodes.
+ *
+ * Instead of storing transient `__isAIGenerating` attributes in the ADF schema
+ * (which pollutes the document model and undo history), this plugin uses
+ * ProseMirror decorations — a view-layer-only mechanism that never affects the
+ * document content, serialization, or undo/redo stack.
+ */
+export declare const aiGeneratingDecorationPluginKey: PluginKey;
+export type AIGeneratingAction = {
+    mediaId: string;
+    type: 'SET_GENERATING';
+} | {
+    mediaId: string;
+    type: 'CLEAR_GENERATING';
+} | {
+    type: 'CLEAR_ALL';
+};
+/**
+ * Returns `true` if the given decorations array contains an AI-generating
+ * decoration. Call this from a NodeView's `update()` / `viewShouldUpdate()`
+ * to determine whether to render the AI border.
+ */
+export declare function hasAIGeneratingDecoration(decorations: readonly Decoration[]): boolean;
+/**
+ * Dispatch a transaction that sets the AI-generating decoration on a media
+ * node identified by `mediaId`.
+ *
+ * Usage from the editor bridge:
+ * ```
+ * editorAPI.core.actions.execute(({ tr }) =>
+ *   setAIGeneratingMeta(tr, mediaId),
+ * );
+ * ```
+ */
+export declare function setAIGeneratingMeta(tr: Transaction, mediaId: string): Transaction;
+/**
+ * Dispatch a transaction that clears the AI-generating decoration for a
+ * specific media node.
+ */
+export declare function clearAIGeneratingMeta(tr: Transaction, mediaId: string): Transaction;
+/** Creates the ProseMirror plugin that manages AI-generating decorations on media nodes. */
+export declare function createAIGeneratingDecorationPlugin(): SafePlugin;

package/dist/types-ts4.5/pm-plugins/commands.d.ts

@@ -4,4 +4,17 @@ import type { EditorCommand } from '@atlaskit/editor-common/types';
 export declare const showMediaViewer: (media: MediaADFAttrs) => EditorCommand;
 export declare const hideMediaViewer: EditorCommand;
 export declare const trackMediaPaste: (attrs: MediaADFAttrs) => EditorCommand;
+/**
+ * Sets the AI-generating decoration on a media node identified by `mediaId`.
+ * The decoration triggers the AI border visual on the media's NodeView.
+ *
+ * Decorations live in the view layer only and never affect the document model
+ * or undo/redo history.
+ */
+export declare const setAIGenerating: (mediaId: string) => EditorCommand;
+/**
+ * Clears the AI-generating decoration for a specific media node identified by
+ * `mediaId`. Removes the AI border visual from that media's NodeView.
+ */
+export declare const clearAIGenerating: (mediaId: string) => EditorCommand;
 export declare const insertMediaAsMediaSingleCommand: (editorAnalyticsAPI?: EditorAnalyticsAPI, allowPixelResizing?: boolean) => (mediaAttrs: MediaADFAttrs, inputMethod: InputMethodInsertMedia, insertMediaVia?: InsertMediaVia) => EditorCommand;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "12.1.5",
+	"version": "12.2.0",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -29,7 +29,7 @@
 	],
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/adf-schema": "^52.5.0",
+		"@atlaskit/adf-schema": "^52.6.0",
 		"@atlaskit/analytics-namespaced-context": "^7.2.0",
 		"@atlaskit/analytics-next": "^11.2.0",
 		"@atlaskit/button": "^23.11.0",
@@ -51,10 +51,11 @@
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/editor-shared-styles": "^3.10.0",
 		"@atlaskit/editor-tables": "^2.9.0",
+		"@atlaskit/feature-gate-js-client": "5.5.11",
 		"@atlaskit/form": "^15.5.0",
 		"@atlaskit/icon": "^34.3.0",
 		"@atlaskit/icon-lab": "^6.6.0",
-		"@atlaskit/media-card": "^80.1.0",
+		"@atlaskit/media-card": "^80.2.0",
 		"@atlaskit/media-client": "^36.0.0",
 		"@atlaskit/media-client-react": "^5.0.0",
 		"@atlaskit/media-common": "^13.0.0",
@@ -65,7 +66,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/textfield": "^8.3.0",
-		"@atlaskit/tmp-editor-statsig": "^67.0.0",
+		"@atlaskit/tmp-editor-statsig": "^68.0.0",
 		"@atlaskit/tokens": "^13.0.0",
 		"@atlaskit/tooltip": "^21.2.0",
 		"@babel/runtime": "^7.0.0",
@@ -77,7 +78,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^114.8.0",
+		"@atlaskit/editor-common": "^114.9.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",