@atlaskit/editor-plugin-media 0.11.1 → 0.11.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-media
 
+## 0.11.3
+
+### Patch Changes
+
+- [#66631](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/66631) [`c1d10d6c2013`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c1d10d6c2013) - Updated alt text analytics to log additional attributes
+- [#67194](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67194) [`37379761475c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/37379761475c) - [ED-21806] Skip changes from NCS and tinted transactions.
+
+## 0.11.2
+
+### Patch Changes
+
+- [#66510](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/66510) [`de9aee7692ab`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/de9aee7692ab) - [ux] ED-21829 Hiding Inline and Original size floating toolbar buttons for external images
+- Updated dependencies
+
 ## 0.11.1
 
 ### Patch Changes

package/dist/cjs/commands/helpers.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.updateMediaSingleNodeAttrs = exports.updateCurrentMediaNodeAttrs = exports.updateAllMediaSingleNodesAttrs = exports.replaceExternalMedia = exports.isMediaNode = exports.findMediaSingleNode = exports.findAllMediaSingleNodes = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _steps = require("@atlaskit/adf-schema/steps");
+var _collab = require("@atlaskit/editor-common/collab");
 var _pluginKey = require("../pm-plugins/plugin-key");
 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; }
@@ -65,6 +66,7 @@ var updateAllMediaSingleNodesAttrs = exports.updateAllMediaSingleNodesAttrs = fu
       return tr.step(new _steps.SetAttrsStep(pos, attrs));
     });
     tr.setMeta('addToHistory', false);
+    (0, _collab.tintDirtyTransaction)(tr);
     if (dispatch) {
       dispatch(tr);
     }

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

@@ -9,17 +9,26 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _editorAnalytics = require("@atlaskit/editor-common/editor-analytics");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _commands = require("../../toolbar/commands");
 var _mediaCommon = require("../../utils/media-common");
 var _index = require("./index");
 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 createCommandWithAnalytics = function createCommandWithAnalytics(actionType, action, transform) {
   return function (editorAnalyticsAPI) {
-    return (0, _editorAnalytics.withAnalytics)(editorAnalyticsAPI, {
-      action: actionType,
-      actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
-      actionSubjectId: _analytics.ACTION_SUBJECT_ID.ALT_TEXT,
-      eventType: _analytics.EVENT_TYPE.TRACK
+    return (0, _editorAnalytics.withAnalytics)(editorAnalyticsAPI, function (state) {
+      var mediaNode = (0, _mediaCommon.getMediaSingleOrInlineNodeFromSelection)(state);
+      var type = (0, _commands.getNodeType)(state);
+      return {
+        action: actionType,
+        actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
+        actionSubjectId: _analytics.ACTION_SUBJECT_ID.ALT_TEXT,
+        eventType: _analytics.EVENT_TYPE.TRACK,
+        attributes: {
+          type: type,
+          mediaType: mediaNode.attrs.type
+        }
+      };
     })((0, _index.createCommand)(action, transform));
   };
 };

package/dist/cjs/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -114,13 +114,13 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this.fireAnalytics(_analytics.ACTION.CLOSED);
-      if (!this.prevValue && this.props.value) {
+      if (!this.prevValue && this.state.lastValue) {
         this.fireAnalytics(_analytics.ACTION.ADDED);
       }
-      if (this.prevValue && !this.props.value) {
+      if (this.prevValue && !this.state.lastValue) {
         this.fireAnalytics(_analytics.ACTION.CLEARED);
       }
-      if (this.prevValue && this.prevValue !== this.props.value) {
+      if (this.prevValue && this.prevValue !== this.state.lastValue) {
         this.fireAnalytics(_analytics.ACTION.EDITED);
       }
     }
@@ -202,14 +202,21 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
   }, {
     key: "fireAnalytics",
     value: function fireAnalytics(actionType) {
-      var createAnalyticsEvent = this.props.createAnalyticsEvent;
+      var _this$props2 = this.props,
+        createAnalyticsEvent = _this$props2.createAnalyticsEvent,
+        nodeType = _this$props2.nodeType,
+        mediaType = _this$props2.mediaType;
       if (createAnalyticsEvent && this.fireCustomAnalytics) {
         this.fireCustomAnalytics({
           payload: {
             action: actionType,
             actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
             actionSubjectId: _analytics.ACTION_SUBJECT_ID.ALT_TEXT,
-            eventType: _analytics.EVENT_TYPE.TRACK
+            eventType: _analytics.EVENT_TYPE.TRACK,
+            attributes: {
+              type: nodeType,
+              mediaType: mediaType
+            }
           }
         });
       }

package/dist/cjs/toolbar/alt-text.js

@@ -14,6 +14,7 @@ var _commands = require("../pm-plugins/alt-text/commands");
 var _messages = require("../pm-plugins/alt-text/messages");
 var _AltTextEdit = _interopRequireWildcard(require("../pm-plugins/alt-text/ui/AltTextEdit"));
 var _mediaCommon = require("../utils/media-common");
+var _commands2 = require("./commands");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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; }
@@ -62,9 +63,12 @@ var altTextEditComponent = exports.altTextEditComponent = function altTextEditCo
           dispatch(newTr);
         }
       };
+      var type = (0, _commands2.getNodeType)(state);
       return /*#__PURE__*/_react.default.createElement(_AltTextEdit.default, {
         view: view,
         key: idx,
+        nodeType: type,
+        mediaType: mediaNode.attrs.type,
         value: mediaNode.attrs.alt,
         altTextValidator: options && options.altTextValidator,
         onEscape: handleEsc

package/dist/cjs/toolbar/commands.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateMediaSingleWidth = exports.toggleBorderMark = exports.setBorderMark = exports.removeInlineCard = exports.changeMediaSingleToMediaInline = exports.changeMediaInlineToMediaSingle = exports.changeMediaCardToInline = exports.changeInlineToMediaCard = exports.DEFAULT_BORDER_SIZE = exports.DEFAULT_BORDER_COLOR = void 0;
+exports.updateMediaSingleWidth = exports.toggleBorderMark = exports.setBorderMark = exports.removeInlineCard = exports.getNodeType = exports.changeMediaSingleToMediaInline = exports.changeMediaInlineToMediaSingle = exports.changeMediaCardToInline = exports.changeInlineToMediaCard = exports.DEFAULT_BORDER_SIZE = exports.DEFAULT_BORDER_COLOR = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _model = require("@atlaskit/editor-prosemirror/model");
@@ -20,7 +20,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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 DEFAULT_BORDER_COLOR = exports.DEFAULT_BORDER_COLOR = '#091e4224';
 var DEFAULT_BORDER_SIZE = exports.DEFAULT_BORDER_SIZE = 2;
-var getNodeType = function getNodeType(state) {
+var getNodeType = exports.getNodeType = function getNodeType(state) {
   var _state$schema$nodes = state.schema.nodes,
     mediaSingle = _state$schema$nodes.mediaSingle,
     mediaInline = _state$schema$nodes.mediaInline;

package/dist/cjs/toolbar/index.js

@@ -254,44 +254,49 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
 
     // floating and inline switcher
     if (pluginState.allowInlineImages && selectedNode && (0, _utils2.canShowSwitchButtons)(selectedNode.node)) {
-      var _pluginInjectionApi$a4;
+      var _selectedNode$node$fi;
       var inlineSwitcherTitle = intl.formatMessage(_messages.mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
       var floatingSwitcherTitle = intl.formatMessage(_messages.mediaAndEmbedToolbarMessages.changeToMediaSingle);
 
       // This is temporary for PF release and can be removed once we have border and link support for inline images
       // TODO: [ED-20261] remove this once both border and link marks are supported for inline image
       var tempTooltipContent = /*#__PURE__*/_react.default.createElement("span", null, "Display inline ", /*#__PURE__*/_react.default.createElement("br", null), " \u26A0 This feature is being developed. The conversion process will not retain the image size, link, border, or any other data.");
-      toolbarButtons.push({
-        type: 'button',
-        id: 'editor.media.image.view.switcher.inline',
-        title: inlineSwitcherTitle,
-        tooltipContent: tempTooltipContent,
-        icon: function icon() {
-          return /*#__PURE__*/_react.default.createElement(_card.IconInline, {
-            size: "medium",
-            label: inlineSwitcherTitle
-          });
-        },
-        onClick: (0, _commands.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions),
-        testId: 'image-inline-appearance'
-      }, {
-        type: 'button',
-        id: 'editor.media.image.view.switcher.floating',
-        title: floatingSwitcherTitle,
-        icon: function icon() {
-          return /*#__PURE__*/_react.default.createElement(_card.IconEmbed, {
-            size: "medium",
-            label: floatingSwitcherTitle
-          });
-        },
-        onClick: function onClick() {
-          return true;
-        },
-        testId: 'image-floating-appearance',
-        selected: true
-      }, {
-        type: 'separator'
-      });
+
+      // mediaInlne doesn't suppprt external images, so hiding buttons to prevent conversion from mediaSingle to mediaInline
+      if (((_selectedNode$node$fi = selectedNode.node.firstChild) === null || _selectedNode$node$fi === void 0 ? void 0 : _selectedNode$node$fi.attrs.type) !== 'external') {
+        var _pluginInjectionApi$a4;
+        toolbarButtons.push({
+          type: 'button',
+          id: 'editor.media.image.view.switcher.inline',
+          title: inlineSwitcherTitle,
+          tooltipContent: tempTooltipContent,
+          icon: function icon() {
+            return /*#__PURE__*/_react.default.createElement(_card.IconInline, {
+              size: "medium",
+              label: inlineSwitcherTitle
+            });
+          },
+          onClick: (0, _commands.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions),
+          testId: 'image-inline-appearance'
+        }, {
+          type: 'button',
+          id: 'editor.media.image.view.switcher.floating',
+          title: floatingSwitcherTitle,
+          icon: function icon() {
+            return /*#__PURE__*/_react.default.createElement(_card.IconEmbed, {
+              size: "medium",
+              label: floatingSwitcherTitle
+            });
+          },
+          onClick: function onClick() {
+            return true;
+          },
+          testId: 'image-floating-appearance',
+          selected: true
+        }, {
+          type: 'separator'
+        });
+      }
     }
 
     // Pixel Entry Toolbar Support

package/dist/es2019/commands/helpers.js

@@ -1,4 +1,5 @@
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
+import { tintDirtyTransaction } from '@atlaskit/editor-common/collab';
 import { stateKey as mediaPluginKey } from '../pm-plugins/plugin-key';
 /**
  * Note that Media Inline is inserted like a media single node into the media plugin state.
@@ -57,6 +58,7 @@ export const updateAllMediaSingleNodesAttrs = (id, attrs) => (state, dispatch) =
   const tr = state.tr;
   validMediaNodePositions.forEach(pos => tr.step(new SetAttrsStep(pos, attrs)));
   tr.setMeta('addToHistory', false);
+  tintDirtyTransaction(tr);
   if (dispatch) {
     dispatch(tr);
   }

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

@@ -1,15 +1,26 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { getNodeType } from '../../toolbar/commands';
 import { getMediaSingleOrInlineNodeFromSelection, isMediaSingleOrInlineNodeSelected } from '../../utils/media-common';
 import { createCommand } from './index';
 const createCommandWithAnalytics = (actionType, action, transform) => {
-  return editorAnalyticsAPI => withAnalytics(editorAnalyticsAPI, {
-    action: actionType,
-    actionSubject: ACTION_SUBJECT.MEDIA,
-    actionSubjectId: ACTION_SUBJECT_ID.ALT_TEXT,
-    eventType: EVENT_TYPE.TRACK
-  })(createCommand(action, transform));
+  return editorAnalyticsAPI => {
+    return withAnalytics(editorAnalyticsAPI, state => {
+      const mediaNode = getMediaSingleOrInlineNodeFromSelection(state);
+      const type = getNodeType(state);
+      return {
+        action: actionType,
+        actionSubject: ACTION_SUBJECT.MEDIA,
+        actionSubjectId: ACTION_SUBJECT_ID.ALT_TEXT,
+        eventType: EVENT_TYPE.TRACK,
+        attributes: {
+          type,
+          mediaType: mediaNode.attrs.type
+        }
+      };
+    })(createCommand(action, transform));
+  };
 };
 
 // pass in undefined to close the alt text menu without saving

package/dist/es2019/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -124,13 +124,13 @@ export class AltTextEditComponent extends React.Component {
   }
   componentWillUnmount() {
     this.fireAnalytics(ACTION.CLOSED);
-    if (!this.prevValue && this.props.value) {
+    if (!this.prevValue && this.state.lastValue) {
       this.fireAnalytics(ACTION.ADDED);
     }
-    if (this.prevValue && !this.props.value) {
+    if (this.prevValue && !this.state.lastValue) {
       this.fireAnalytics(ACTION.CLEARED);
     }
-    if (this.prevValue && this.prevValue !== this.props.value) {
+    if (this.prevValue && this.prevValue !== this.state.lastValue) {
       this.fireAnalytics(ACTION.EDITED);
     }
   }
@@ -215,7 +215,9 @@ export class AltTextEditComponent extends React.Component {
   }
   fireAnalytics(actionType) {
     const {
-      createAnalyticsEvent
+      createAnalyticsEvent,
+      nodeType,
+      mediaType
     } = this.props;
     if (createAnalyticsEvent && this.fireCustomAnalytics) {
       this.fireCustomAnalytics({
@@ -223,7 +225,11 @@ export class AltTextEditComponent extends React.Component {
           action: actionType,
           actionSubject: ACTION_SUBJECT.MEDIA,
           actionSubjectId: ACTION_SUBJECT_ID.ALT_TEXT,
-          eventType: EVENT_TYPE.TRACK
+          eventType: EVENT_TYPE.TRACK,
+          attributes: {
+            type: nodeType,
+            mediaType
+          }
         }
       });
     }

package/dist/es2019/toolbar/alt-text.js

@@ -5,6 +5,7 @@ import { openMediaAltTextMenu } from '../pm-plugins/alt-text/commands';
 import { messages } from '../pm-plugins/alt-text/messages';
 import AltTextEdit, { CONTAINER_WIDTH_IN_PX } from '../pm-plugins/alt-text/ui/AltTextEdit';
 import { getMediaSingleOrInlineNodeFromSelection } from '../utils/media-common';
+import { getNodeType } from './commands';
 const testId = 'alt-text-edit-button';
 export const altTextButton = (intl, state, editorAnalyticsAPI) => {
   const mediaNode = getMediaSingleOrInlineNodeFromSelection(state);
@@ -53,9 +54,12 @@ export const altTextEditComponent = options => {
           dispatch(newTr);
         }
       };
+      const type = getNodeType(state);
       return /*#__PURE__*/React.createElement(AltTextEdit, {
         view: view,
         key: idx,
+        nodeType: type,
+        mediaType: mediaNode.attrs.type,
         value: mediaNode.attrs.alt,
         altTextValidator: options && options.altTextValidator,
         onEscape: handleEsc

package/dist/es2019/toolbar/commands.js

@@ -10,7 +10,7 @@ import { changeFromMediaInlineToMediaSingleNode } from '../utils/media-single';
 import { getSelectedMediaSingle, removeMediaGroupNode } from './utils';
 export const DEFAULT_BORDER_COLOR = '#091e4224';
 export const DEFAULT_BORDER_SIZE = 2;
-const getNodeType = state => {
+export const getNodeType = state => {
   const {
     mediaSingle,
     mediaInline

package/dist/es2019/toolbar/index.js

@@ -247,40 +247,45 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
 
     // floating and inline switcher
     if (pluginState.allowInlineImages && selectedNode && canShowSwitchButtons(selectedNode.node)) {
-      var _pluginInjectionApi$a4;
+      var _selectedNode$node$fi;
       const inlineSwitcherTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
       const floatingSwitcherTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaSingle);
 
       // This is temporary for PF release and can be removed once we have border and link support for inline images
       // TODO: [ED-20261] remove this once both border and link marks are supported for inline image
       const tempTooltipContent = /*#__PURE__*/React.createElement("span", null, "Display inline ", /*#__PURE__*/React.createElement("br", null), " \u26A0 This feature is being developed. The conversion process will not retain the image size, link, border, or any other data.");
-      toolbarButtons.push({
-        type: 'button',
-        id: 'editor.media.image.view.switcher.inline',
-        title: inlineSwitcherTitle,
-        tooltipContent: tempTooltipContent,
-        icon: () => /*#__PURE__*/React.createElement(IconInline, {
-          size: "medium",
-          label: inlineSwitcherTitle
-        }),
-        onClick: changeMediaSingleToMediaInline(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions),
-        testId: 'image-inline-appearance'
-      }, {
-        type: 'button',
-        id: 'editor.media.image.view.switcher.floating',
-        title: floatingSwitcherTitle,
-        icon: () => /*#__PURE__*/React.createElement(IconEmbed, {
-          size: "medium",
-          label: floatingSwitcherTitle
-        }),
-        onClick: () => {
-          return true;
-        },
-        testId: 'image-floating-appearance',
-        selected: true
-      }, {
-        type: 'separator'
-      });
+
+      // mediaInlne doesn't suppprt external images, so hiding buttons to prevent conversion from mediaSingle to mediaInline
+      if (((_selectedNode$node$fi = selectedNode.node.firstChild) === null || _selectedNode$node$fi === void 0 ? void 0 : _selectedNode$node$fi.attrs.type) !== 'external') {
+        var _pluginInjectionApi$a4;
+        toolbarButtons.push({
+          type: 'button',
+          id: 'editor.media.image.view.switcher.inline',
+          title: inlineSwitcherTitle,
+          tooltipContent: tempTooltipContent,
+          icon: () => /*#__PURE__*/React.createElement(IconInline, {
+            size: "medium",
+            label: inlineSwitcherTitle
+          }),
+          onClick: changeMediaSingleToMediaInline(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions),
+          testId: 'image-inline-appearance'
+        }, {
+          type: 'button',
+          id: 'editor.media.image.view.switcher.floating',
+          title: floatingSwitcherTitle,
+          icon: () => /*#__PURE__*/React.createElement(IconEmbed, {
+            size: "medium",
+            label: floatingSwitcherTitle
+          }),
+          onClick: () => {
+            return true;
+          },
+          testId: 'image-floating-appearance',
+          selected: true
+        }, {
+          type: 'separator'
+        });
+      }
     }
 
     // Pixel Entry Toolbar Support

package/dist/esm/commands/helpers.js

@@ -2,6 +2,7 @@ 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 { SetAttrsStep } from '@atlaskit/adf-schema/steps';
+import { tintDirtyTransaction } from '@atlaskit/editor-common/collab';
 import { stateKey as mediaPluginKey } from '../pm-plugins/plugin-key';
 /**
  * Note that Media Inline is inserted like a media single node into the media plugin state.
@@ -58,6 +59,7 @@ export var updateAllMediaSingleNodesAttrs = function updateAllMediaSingleNodesAt
       return tr.step(new SetAttrsStep(pos, attrs));
     });
     tr.setMeta('addToHistory', false);
+    tintDirtyTransaction(tr);
     if (dispatch) {
       dispatch(tr);
     }

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

@@ -4,15 +4,24 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { getNodeType } from '../../toolbar/commands';
 import { getMediaSingleOrInlineNodeFromSelection, isMediaSingleOrInlineNodeSelected } from '../../utils/media-common';
 import { createCommand } from './index';
 var createCommandWithAnalytics = function createCommandWithAnalytics(actionType, action, transform) {
   return function (editorAnalyticsAPI) {
-    return withAnalytics(editorAnalyticsAPI, {
-      action: actionType,
-      actionSubject: ACTION_SUBJECT.MEDIA,
-      actionSubjectId: ACTION_SUBJECT_ID.ALT_TEXT,
-      eventType: EVENT_TYPE.TRACK
+    return withAnalytics(editorAnalyticsAPI, function (state) {
+      var mediaNode = getMediaSingleOrInlineNodeFromSelection(state);
+      var type = getNodeType(state);
+      return {
+        action: actionType,
+        actionSubject: ACTION_SUBJECT.MEDIA,
+        actionSubjectId: ACTION_SUBJECT_ID.ALT_TEXT,
+        eventType: EVENT_TYPE.TRACK,
+        attributes: {
+          type: type,
+          mediaType: mediaNode.attrs.type
+        }
+      };
     })(createCommand(action, transform));
   };
 };

package/dist/esm/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -108,13 +108,13 @@ export var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this.fireAnalytics(ACTION.CLOSED);
-      if (!this.prevValue && this.props.value) {
+      if (!this.prevValue && this.state.lastValue) {
         this.fireAnalytics(ACTION.ADDED);
       }
-      if (this.prevValue && !this.props.value) {
+      if (this.prevValue && !this.state.lastValue) {
         this.fireAnalytics(ACTION.CLEARED);
       }
-      if (this.prevValue && this.prevValue !== this.props.value) {
+      if (this.prevValue && this.prevValue !== this.state.lastValue) {
         this.fireAnalytics(ACTION.EDITED);
       }
     }
@@ -196,14 +196,21 @@ export var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "fireAnalytics",
     value: function fireAnalytics(actionType) {
-      var createAnalyticsEvent = this.props.createAnalyticsEvent;
+      var _this$props2 = this.props,
+        createAnalyticsEvent = _this$props2.createAnalyticsEvent,
+        nodeType = _this$props2.nodeType,
+        mediaType = _this$props2.mediaType;
       if (createAnalyticsEvent && this.fireCustomAnalytics) {
         this.fireCustomAnalytics({
           payload: {
             action: actionType,
             actionSubject: ACTION_SUBJECT.MEDIA,
             actionSubjectId: ACTION_SUBJECT_ID.ALT_TEXT,
-            eventType: EVENT_TYPE.TRACK
+            eventType: EVENT_TYPE.TRACK,
+            attributes: {
+              type: nodeType,
+              mediaType: mediaType
+            }
           }
         });
       }

package/dist/esm/toolbar/alt-text.js

@@ -8,6 +8,7 @@ import { openMediaAltTextMenu } from '../pm-plugins/alt-text/commands';
 import { messages } from '../pm-plugins/alt-text/messages';
 import AltTextEdit, { CONTAINER_WIDTH_IN_PX } from '../pm-plugins/alt-text/ui/AltTextEdit';
 import { getMediaSingleOrInlineNodeFromSelection } from '../utils/media-common';
+import { getNodeType } from './commands';
 var testId = 'alt-text-edit-button';
 export var altTextButton = function altTextButton(intl, state, editorAnalyticsAPI) {
   var mediaNode = getMediaSingleOrInlineNodeFromSelection(state);
@@ -52,9 +53,12 @@ export var altTextEditComponent = function altTextEditComponent(options) {
           dispatch(newTr);
         }
       };
+      var type = getNodeType(state);
       return /*#__PURE__*/React.createElement(AltTextEdit, {
         view: view,
         key: idx,
+        nodeType: type,
+        mediaType: mediaNode.attrs.type,
         value: mediaNode.attrs.alt,
         altTextValidator: options && options.altTextValidator,
         onEscape: handleEsc

package/dist/esm/toolbar/commands.js

@@ -13,7 +13,7 @@ import { changeFromMediaInlineToMediaSingleNode } from '../utils/media-single';
 import { getSelectedMediaSingle, removeMediaGroupNode } from './utils';
 export var DEFAULT_BORDER_COLOR = '#091e4224';
 export var DEFAULT_BORDER_SIZE = 2;
-var getNodeType = function getNodeType(state) {
+export var getNodeType = function getNodeType(state) {
   var _state$schema$nodes = state.schema.nodes,
     mediaSingle = _state$schema$nodes.mediaSingle,
     mediaInline = _state$schema$nodes.mediaInline;

package/dist/esm/toolbar/index.js

@@ -244,44 +244,49 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
 
     // floating and inline switcher
     if (pluginState.allowInlineImages && selectedNode && canShowSwitchButtons(selectedNode.node)) {
-      var _pluginInjectionApi$a4;
+      var _selectedNode$node$fi;
       var inlineSwitcherTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
       var floatingSwitcherTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaSingle);
 
       // This is temporary for PF release and can be removed once we have border and link support for inline images
       // TODO: [ED-20261] remove this once both border and link marks are supported for inline image
       var tempTooltipContent = /*#__PURE__*/React.createElement("span", null, "Display inline ", /*#__PURE__*/React.createElement("br", null), " \u26A0 This feature is being developed. The conversion process will not retain the image size, link, border, or any other data.");
-      toolbarButtons.push({
-        type: 'button',
-        id: 'editor.media.image.view.switcher.inline',
-        title: inlineSwitcherTitle,
-        tooltipContent: tempTooltipContent,
-        icon: function icon() {
-          return /*#__PURE__*/React.createElement(IconInline, {
-            size: "medium",
-            label: inlineSwitcherTitle
-          });
-        },
-        onClick: changeMediaSingleToMediaInline(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions),
-        testId: 'image-inline-appearance'
-      }, {
-        type: 'button',
-        id: 'editor.media.image.view.switcher.floating',
-        title: floatingSwitcherTitle,
-        icon: function icon() {
-          return /*#__PURE__*/React.createElement(IconEmbed, {
-            size: "medium",
-            label: floatingSwitcherTitle
-          });
-        },
-        onClick: function onClick() {
-          return true;
-        },
-        testId: 'image-floating-appearance',
-        selected: true
-      }, {
-        type: 'separator'
-      });
+
+      // mediaInlne doesn't suppprt external images, so hiding buttons to prevent conversion from mediaSingle to mediaInline
+      if (((_selectedNode$node$fi = selectedNode.node.firstChild) === null || _selectedNode$node$fi === void 0 ? void 0 : _selectedNode$node$fi.attrs.type) !== 'external') {
+        var _pluginInjectionApi$a4;
+        toolbarButtons.push({
+          type: 'button',
+          id: 'editor.media.image.view.switcher.inline',
+          title: inlineSwitcherTitle,
+          tooltipContent: tempTooltipContent,
+          icon: function icon() {
+            return /*#__PURE__*/React.createElement(IconInline, {
+              size: "medium",
+              label: inlineSwitcherTitle
+            });
+          },
+          onClick: changeMediaSingleToMediaInline(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions),
+          testId: 'image-inline-appearance'
+        }, {
+          type: 'button',
+          id: 'editor.media.image.view.switcher.floating',
+          title: floatingSwitcherTitle,
+          icon: function icon() {
+            return /*#__PURE__*/React.createElement(IconEmbed, {
+              size: "medium",
+              label: floatingSwitcherTitle
+            });
+          },
+          onClick: function onClick() {
+            return true;
+          },
+          testId: 'image-floating-appearance',
+          selected: true
+        }, {
+          type: 'separator'
+        });
+      }
     }
 
     // Pixel Entry Toolbar Support

package/dist/types/pm-plugins/alt-text/ui/AltTextEdit.d.ts

@@ -7,6 +7,8 @@ export declare const CONTAINER_WIDTH_IN_PX = 420;
 export declare const MAX_ALT_TEXT_LENGTH = 510;
 type Props = {
     view: EditorView;
+    nodeType: 'mediaSingle' | 'mediaInline';
+    mediaType: 'file' | 'image' | 'external';
     value?: string;
     altTextValidator?: (value: string) => string[];
     onEscape?: () => void;

package/dist/types/toolbar/commands.d.ts

@@ -3,10 +3,12 @@ import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command } from '@atlaskit/editor-common/types';
 import type { ForceFocusSelector } from '@atlaskit/editor-plugin-floating-toolbar';
 import type { WidthPluginState } from '@atlaskit/editor-plugin-width';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EventInput } from '../pm-plugins/types';
 import type { PixelEntryValidation } from '../ui/PixelEntry/types';
 export declare const DEFAULT_BORDER_COLOR = "#091e4224";
 export declare const DEFAULT_BORDER_SIZE = 2;
+export declare const getNodeType: (state: EditorState) => "mediaInline" | "mediaSingle";
 export declare const changeInlineToMediaCard: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, forceFocusSelector: ForceFocusSelector | undefined) => Command;
 export declare const changeMediaCardToInline: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, forceFocusSelector: ForceFocusSelector | undefined) => Command;
 export declare const changeMediaInlineToMediaSingle: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, widthPluginState: WidthPluginState | undefined) => Command;

package/dist/types-ts4.5/pm-plugins/alt-text/ui/AltTextEdit.d.ts

@@ -7,6 +7,8 @@ export declare const CONTAINER_WIDTH_IN_PX = 420;
 export declare const MAX_ALT_TEXT_LENGTH = 510;
 type Props = {
     view: EditorView;
+    nodeType: 'mediaSingle' | 'mediaInline';
+    mediaType: 'file' | 'image' | 'external';
     value?: string;
     altTextValidator?: (value: string) => string[];
     onEscape?: () => void;

package/dist/types-ts4.5/toolbar/commands.d.ts

@@ -3,10 +3,12 @@ import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command } from '@atlaskit/editor-common/types';
 import type { ForceFocusSelector } from '@atlaskit/editor-plugin-floating-toolbar';
 import type { WidthPluginState } from '@atlaskit/editor-plugin-width';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EventInput } from '../pm-plugins/types';
 import type { PixelEntryValidation } from '../ui/PixelEntry/types';
 export declare const DEFAULT_BORDER_COLOR = "#091e4224";
 export declare const DEFAULT_BORDER_SIZE = 2;
+export declare const getNodeType: (state: EditorState) => "mediaInline" | "mediaSingle";
 export declare const changeInlineToMediaCard: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, forceFocusSelector: ForceFocusSelector | undefined) => Command;
 export declare const changeMediaCardToInline: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, forceFocusSelector: ForceFocusSelector | undefined) => Command;
 export declare const changeMediaInlineToMediaSingle: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, widthPluginState: WidthPluginState | undefined) => Command;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-media",
-  "version": "0.11.1",
+  "version": "0.11.3",
   "description": "Media plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -13,7 +13,7 @@
     "singleton": true,
     "runReact18": false
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
@@ -54,7 +54,7 @@
     "@atlaskit/editor-tables": "^2.3.0",
     "@atlaskit/form": "^9.0.3",
     "@atlaskit/icon": "^22.0.0",
-    "@atlaskit/media-card": "^77.6.0",
+    "@atlaskit/media-card": "^77.7.0",
     "@atlaskit/media-client": "^26.1.0",
     "@atlaskit/media-client-react": "^2.0.0",
     "@atlaskit/media-common": "^11.0.0",