@atlaskit/editor-plugin-media 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-media
 
+## 0.9.0
+
+### Minor Changes
+
+- [#63809](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63809) [`0a735e84c669`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0a735e84c669) - Added alt text support for inline images
+
+## 0.8.1
+
+### Patch Changes
+
+- [#63388](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63388) [`999a8302f404`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/999a8302f404) - add analytics for changing media inline to media single
+- [#63608](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63608) [`bfb98fe84eae`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bfb98fe84eae) - [ux] EDF-93: Report and resolve existing duplicate i18n message descriptor keys/IDs in editor, as precursor work to adding CI check
+
 ## 0.8.0
 
 ### Minor Changes

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

@@ -4,10 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateAltText = exports.openMediaAltTextMenu = exports.closeMediaAltTextMenu = void 0;
+exports.updateAltTextTransform = exports.updateAltText = exports.openMediaAltTextMenu = exports.closeMediaAltTextMenuAndSave = exports.closeMediaAltTextMenu = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _editorAnalytics = require("@atlaskit/editor-common/editor-analytics");
+var _state = require("@atlaskit/editor-prosemirror/state");
 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; }
@@ -22,16 +23,22 @@ var createCommandWithAnalytics = function createCommandWithAnalytics(actionType,
     })((0, _index.createCommand)(action, transform));
   };
 };
-var closeMediaAltTextMenu = exports.closeMediaAltTextMenu = (0, _index.createCommand)(function (state) {
-  if ((0, _mediaCommon.isSelectionMediaSingleNode)(state)) {
-    return {
-      type: 'closeMediaAltTextMenu'
-    };
-  }
-  return false;
-});
+
+// pass in undefined to close the alt text menu without saving
+var closeMediaAltTextMenuAndSave = exports.closeMediaAltTextMenuAndSave = function closeMediaAltTextMenuAndSave(altText) {
+  var commandTransform = typeof altText === 'string' ? updateAltTextTransform(altText) : undefined;
+  return (0, _index.createCommand)(function (state) {
+    if ((0, _mediaCommon.isMediaSingleOrInlineNodeSelected)(state)) {
+      return {
+        type: 'closeMediaAltTextMenu'
+      };
+    }
+    return false;
+  }, commandTransform);
+};
+var closeMediaAltTextMenu = exports.closeMediaAltTextMenu = closeMediaAltTextMenuAndSave();
 var openMediaAltTextMenu = exports.openMediaAltTextMenu = createCommandWithAnalytics(_analytics.ACTION.OPENED, function (state) {
-  if ((0, _mediaCommon.isSelectionMediaSingleNode)(state)) {
+  if ((0, _mediaCommon.isMediaSingleOrInlineNodeSelected)(state)) {
     return {
       type: 'openMediaAltTextMenu'
     };
@@ -40,20 +47,34 @@ var openMediaAltTextMenu = exports.openMediaAltTextMenu = createCommandWithAnaly
 }, function (tr) {
   return tr.setMeta('scrollIntoView', false);
 });
-var updateAltText = exports.updateAltText = function updateAltText(newAltText) {
-  return (0, _index.createCommand)(function (state) {
-    return (0, _mediaCommon.isSelectionMediaSingleNode)(state) ? {
-      type: 'updateAltText'
-    } : false;
-  }, function (tr, state) {
-    var mediaNode = (0, _mediaCommon.getMediaNodeFromSelection)(state);
-    var pos = tr.selection.from + 1;
+var updateAltTextTransform = exports.updateAltTextTransform = function updateAltTextTransform(newAltText) {
+  return function (tr, state) {
+    var mediaNode = (0, _mediaCommon.getMediaSingleOrInlineNodeFromSelection)(state);
     if (mediaNode) {
-      tr.setMeta('scrollIntoView', false);
-      tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, mediaNode.attrs), {}, {
+      var pos = mediaNode.type === state.schema.nodes.media ? tr.selection.from + 1 : tr.selection.from;
+
+      /**
+       * Any changes to attributes of a node count the node as "recreated" in Prosemirror[1]
+       * This makes it so Prosemirror resets the selection to the child i.e. "media" instead of "media-single"
+       * The recommended fix is to reset the selection.[2]
+       *
+       * [1] https://discuss.prosemirror.net/t/setnodemarkup-loses-current-nodeselection/976
+       * [2] https://discuss.prosemirror.net/t/setnodemarkup-and-deselect/3673
+       */
+      tr.setMeta('scrollIntoView', false).setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, mediaNode.attrs), {}, {
         alt: newAltText
-      }));
+      })).setSelection(_state.NodeSelection.create(tr.doc, pos));
     }
     return tr;
-  });
+  };
+};
+var updateAltText = exports.updateAltText = function updateAltText(newAltText) {
+  return (0, _index.createCommand)(function (state) {
+    if ((0, _mediaCommon.isMediaSingleOrInlineNodeSelected)(state)) {
+      return {
+        type: 'updateAltText'
+      };
+    }
+    return false;
+  }, updateAltTextTransform(newAltText));
 };

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

@@ -54,7 +54,11 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "closeMediaAltTextMenu", function () {
       var view = _this.props.view;
-      (0, _commands.closeMediaAltTextMenu)(view.state, view.dispatch);
+      if (_this.state.validationErrors.length === 0) {
+        (0, _commands.closeMediaAltTextMenuAndSave)(_this.state.lastValue || '')(view.state, view.dispatch);
+      } else {
+        (0, _commands.closeMediaAltTextMenu)(view.state, view.dispatch);
+      }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "dispatchCancelEvent", function (event) {
       var _this$props = _this.props,
@@ -69,11 +73,6 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
       });
       onEscape === null || onEscape === void 0 || onEscape();
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateAltText", function (newAltText) {
-      var view = _this.props.view;
-      var newValue = newAltText.length === 0 ? '' : newAltText;
-      (0, _commands.updateAltText)(newValue)(view.state, view.dispatch);
-    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOnChange", function (newAltText) {
       var _this$state;
       var validationErrors = _this.getValidationErrors(newAltText);
@@ -91,18 +90,12 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
         showClearTextButton: Boolean(newAltText),
         validationErrors: validationErrors,
         lastValue: newAltText
-      }, function () {
-        if (!validationErrors || !validationErrors.length) {
-          _this.updateAltText(newAltText);
-        }
       });
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOnBlur", function () {
-      // Handling the trimming onBlur() because PanelTextInput doesn't sync
-      // defaultValue properly during unmount
-      var value = _this.props.value;
-      var newValue = (_this.state.lastValue || value || '').trim();
-      _this.handleOnChange(newValue);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOnBlur", function (e) {
+      // prevent other selection transaction gets triggered
+      e.stopPropagation();
+      _this.closeMediaAltTextMenu();
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClearText", function () {
       _this.handleOnChange('');

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

@@ -22,7 +22,7 @@ var mediaResizeAnnouncerMess = exports.mediaResizeAnnouncerMess = (0, _reactIntl
     description: 'Media width {action} to {newMediaWidth} pixels.'
   },
   IncreasedAction: {
-    id: 'fabric.editor.media.decreased',
+    id: 'fabric.editor.media.increased',
     defaultMessage: 'increased',
     description: 'Increased action'
   },

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

@@ -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 testId = 'alt-text-edit-button';
 var altTextButton = exports.altTextButton = function altTextButton(intl, state, editorAnalyticsAPI) {
-  var mediaNode = (0, _mediaCommon.getMediaNodeFromSelection)(state);
+  var mediaNode = (0, _mediaCommon.getMediaSingleOrInlineNodeFromSelection)(state);
   var message = mediaNode && mediaNode.attrs.alt ? _messages.messages.editAltText : _messages.messages.altText;
   var title = intl.formatMessage(message);
   return {
@@ -45,7 +45,8 @@ var altTextEditComponent = exports.altTextEditComponent = function altTextEditCo
       if (!view) {
         return null;
       }
-      var mediaNode = (0, _mediaCommon.getMediaNodeFromSelection)(view.state);
+      var state = view.state;
+      var mediaNode = (0, _mediaCommon.getMediaSingleOrInlineNodeFromSelection)(state);
       if (!mediaNode) {
         return null;
       }

package/dist/cjs/toolbar/mediaInline.js

@@ -17,6 +17,7 @@ var _mediaUi = require("@atlaskit/media-ui");
 var _linking = require("../commands/linking");
 var _linking2 = require("../pm-plugins/linking");
 var _isType = require("../utils/is-type");
+var _altText = require("./alt-text");
 var _commands = require("./commands");
 var _filePreviewItem = require("./filePreviewItem");
 var _linkingToolbarAppearance = require("./linking-toolbar-appearance");
@@ -24,15 +25,14 @@ var _utils = require("./utils");
 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; }
 var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi) {
-  var _pluginInjectionApi$a, _pluginInjectionApi$w;
+  var _pluginInjectionApi$a;
   var options = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
   var editorAnalyticsAPI = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions;
-  var widthPluginState = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.currentState();
   var mediaInline = state.schema.nodes.mediaInline;
   var mediaType = state.selection instanceof _state2.NodeSelection && state.selection.node.attrs.type;
   var mediaLinkingState = (0, _linking2.getMediaLinkingState)(state);
   if (mediaPluginState.allowInlineImages && (0, _isType.isImage)(mediaType)) {
-    return getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, widthPluginState, pluginInjectionApi, mediaLinkingState);
+    return getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, pluginInjectionApi, mediaLinkingState, options);
   }
   var items = [{
     id: 'editor.media.view.switcher',
@@ -105,14 +105,18 @@ var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingTool
   }];
   return items;
 };
-var getMediaInlineImageToolbar = exports.getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, widthPluginState, pluginInjectionApi, mediaLinkingState) {
+var getMediaInlineImageToolbar = exports.getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, pluginInjectionApi, mediaLinkingState) {
+  var _pluginInjectionApi$w;
+  var options = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : {};
   var mediaInline = state.schema.nodes.mediaInline;
   var mediaInlineImageTitle = intl.formatMessage(_messages.mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
   var mediaSingleTitle = intl.formatMessage(_messages.mediaAndEmbedToolbarMessages.changeToMediaSingle);
 
+  // TODO: border marks, media single switcher, alt text, etc
+  var widthPluginState = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.currentState();
   // if type is image, return inline image floating toolbar items
   var inlineImageItems = [
-  // TODO: border marks, media single switcher, alt text, etc
+  // TODO: border marks, media single switcher, link, etc
   {
     id: 'editor.media.convert.mediainline',
     type: 'button',
@@ -140,7 +144,14 @@ var getMediaInlineImageToolbar = exports.getMediaInlineImageToolbar = function g
     onClick: (0, _commands.changeMediaInlineToMediaSingle)(editorAnalyticsAPI, widthPluginState)
   }, {
     type: 'separator'
-  }, {
+  }];
+  if (options.allowAltTextOnImages) {
+    var _pluginInjectionApi$a2;
+    inlineImageItems.push((0, _altText.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions), {
+      type: 'separator'
+    });
+  }
+  inlineImageItems.push({
     type: 'custom',
     fallback: [],
     render: function render(editorView, idx) {
@@ -154,10 +165,10 @@ var getMediaInlineImageToolbar = exports.getMediaInlineImageToolbar = function g
         };
         var openLink = function openLink() {
           if (editorView) {
-            var _pluginInjectionApi$a2;
+            var _pluginInjectionApi$a3;
             var tr = editorView.state.tr,
               dispatch = editorView.dispatch;
-            pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 || _pluginInjectionApi$a2.actions.attachAnalyticsEvent({
+            pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 || _pluginInjectionApi$a3.actions.attachAnalyticsEvent({
               eventType: _analytics.EVENT_TYPE.TRACK,
               action: _analytics.ACTION.VISITED,
               actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
@@ -202,6 +213,6 @@ var getMediaInlineImageToolbar = exports.getMediaInlineImageToolbar = function g
     title: intl.formatMessage(_messages.default.remove),
     onClick: _commands.removeInlineCard,
     testId: 'media-toolbar-remove-button'
-  }];
+  });
   return inlineImageItems;
 };

package/dist/cjs/utils/analytics.js

@@ -3,8 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getMediaResizeAnalyticsEvent = exports.getMediaInputResizeAnalyticsEvent = void 0;
+exports.findChangeFromLocation = findChangeFromLocation;
+exports.getMediaResizeAnalyticsEvent = exports.getMediaInputResizeAnalyticsEvent = exports.getChangeMediaAnalytics = void 0;
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
 var getMediaResizeAnalyticsEvent = exports.getMediaResizeAnalyticsEvent = function getMediaResizeAnalyticsEvent(type, attributes) {
   if (!attributes) {
     return;
@@ -54,4 +56,25 @@ var getMediaInputResizeAnalyticsEvent = exports.getMediaInputResizeAnalyticsEven
     },
     eventType: _analytics.EVENT_TYPE.UI
   };
-};
+};
+var getChangeMediaAnalytics = exports.getChangeMediaAnalytics = function getChangeMediaAnalytics(previousType, newType, changeFromLocation) {
+  return {
+    action: _analytics.ACTION.CHANGED_TYPE,
+    actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
+    eventType: _analytics.EVENT_TYPE.TRACK,
+    attributes: {
+      newType: newType,
+      previousType: previousType,
+      changeFromLocation: changeFromLocation
+    }
+  };
+};
+function findChangeFromLocation(selection) {
+  var _selection$$from$doc$ = selection.$from.doc.type,
+    schema = _selection$$from$doc$.schema,
+    name = _selection$$from$doc$.name;
+  var parentNodeInfo = (0, _utils.findParentNode)(function (node) {
+    return node.type !== schema.nodes.paragraph;
+  })(selection);
+  return parentNodeInfo ? parentNodeInfo.node.type.name : name;
+}

package/dist/cjs/utils/media-common.js

@@ -3,13 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.splitMediaGroup = exports.removeMediaNode = exports.posOfPrecedingMediaGroup = exports.posOfParentMediaGroup = exports.posOfMediaGroupNearby = exports.isSelectionNonMediaBlockNode = exports.isSelectionMediaSingleNode = exports.isMediaBlobUrlFromAttrs = exports.isInsidePotentialEmptyParagraph = exports.getMediaNodeFromSelection = exports.copyOptionalAttrsFromMediaState = void 0;
+exports.splitMediaGroup = exports.removeMediaNode = exports.posOfPrecedingMediaGroup = exports.posOfParentMediaGroup = exports.posOfMediaGroupNearby = exports.isSelectionNonMediaBlockNode = exports.isSelectionMediaSingleNode = exports.isSelectionMediaInlineNode = exports.isMediaSingleOrInlineNodeSelected = exports.isMediaBlobUrlFromAttrs = exports.isInsidePotentialEmptyParagraph = exports.getMediaSingleOrInlineNodeFromSelection = exports.getMediaNodeFromSelection = exports.getMediaInlineNodeFromSelection = exports.copyOptionalAttrsFromMediaState = void 0;
 var _selection = require("@atlaskit/editor-common/selection");
 var _utils = require("@atlaskit/editor-common/utils");
 var _commands = require("@atlaskit/editor-prosemirror/commands");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _mediaClient = require("@atlaskit/media-client");
+var _main = require("../pm-plugins/main");
 var isTemporary = function isTemporary(id) {
   return id.indexOf('temporary:') === 0;
 };
@@ -29,6 +30,11 @@ var isSelectionMediaSingleNode = exports.isSelectionMediaSingleNode = function i
     node = _ref2.node;
   return node && node.type === state.schema.nodes.mediaSingle;
 };
+var isSelectionMediaInlineNode = exports.isSelectionMediaInlineNode = function isSelectionMediaInlineNode(state) {
+  var _ref3 = state.selection,
+    node = _ref3.node;
+  return node && node.type === state.schema.nodes.mediaInline;
+};
 var posOfPrecedingMediaGroup = exports.posOfPrecedingMediaGroup = function posOfPrecedingMediaGroup(state) {
   if (!(0, _selection.atTheBeginningOfBlock)(state)) {
     return;
@@ -178,4 +184,24 @@ var getMediaNodeFromSelection = exports.getMediaNodeFromSelection = function get
     return mediaNode;
   }
   return null;
+};
+var getMediaInlineNodeFromSelection = exports.getMediaInlineNodeFromSelection = function getMediaInlineNodeFromSelection(state) {
+  if (!isSelectionMediaInlineNode(state)) {
+    return null;
+  }
+  var tr = state.tr;
+  var pos = tr.selection.from;
+  var mediaNode = tr.doc.nodeAt(pos);
+  return mediaNode;
+};
+var isMediaSingleOrInlineNodeSelected = exports.isMediaSingleOrInlineNodeSelected = function isMediaSingleOrInlineNodeSelected(state) {
+  var _getMediaPluginState = (0, _main.getMediaPluginState)(state),
+    allowInlineImages = _getMediaPluginState.allowInlineImages;
+  return isSelectionMediaSingleNode(state) || allowInlineImages && isSelectionMediaInlineNode(state);
+};
+var getMediaSingleOrInlineNodeFromSelection = exports.getMediaSingleOrInlineNodeFromSelection = function getMediaSingleOrInlineNodeFromSelection(state) {
+  var _getMediaPluginState2 = (0, _main.getMediaPluginState)(state),
+    allowInlineImages = _getMediaPluginState2.allowInlineImages;
+  var mediaNode = getMediaNodeFromSelection(state) || allowInlineImages && getMediaInlineNodeFromSelection(state);
+  return mediaNode || null;
 };

package/dist/cjs/utils/media-single.js

@@ -18,6 +18,7 @@ var _model = require("@atlaskit/editor-prosemirror/model");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _mediaCommon = require("../utils/media-common");
+var _analytics2 = require("./analytics");
 var _isType = require("./is-type");
 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; }
@@ -45,7 +46,9 @@ function insertNodesWithOptionalParagraph(nodes) {
       schema = state.schema;
     var paragraph = schema.nodes.paragraph;
     var inputMethod = analyticsAttributes.inputMethod,
-      fileExtension = analyticsAttributes.fileExtension;
+      fileExtension = analyticsAttributes.fileExtension,
+      newType = analyticsAttributes.newType,
+      previousType = analyticsAttributes.previousType;
     var openEnd = 0;
     if (shouldAddParagraph(state)) {
       nodes.push(paragraph.create());
@@ -55,6 +58,9 @@ function insertNodesWithOptionalParagraph(nodes) {
     if (inputMethod) {
       editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(getInsertMediaAnalytics(inputMethod, fileExtension))(tr);
     }
+    if (newType && previousType) {
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent((0, _analytics2.getChangeMediaAnalytics)(previousType, newType, (0, _analytics2.findChangeFromLocation)(state.selection)))(tr);
+    }
     if (dispatch) {
       dispatch(tr);
     }
@@ -163,7 +169,9 @@ var changeFromMediaInlineToMediaSingleNode = exports.changeFromMediaInlineToMedi
     content: node
   })) {
     return insertNodesWithOptionalParagraph([node], {
-      fileExtension: fileExtension
+      fileExtension: fileExtension,
+      newType: _analytics.ACTION_SUBJECT_ID.MEDIA_SINGLE,
+      previousType: _analytics.ACTION_SUBJECT_ID.MEDIA_INLINE
     }, editorAnalyticsAPI)(state, dispatch);
   } else {
     var nodePos = state.tr.doc.resolve(state.selection.from).end();
@@ -174,7 +182,7 @@ var changeFromMediaInlineToMediaSingleNode = exports.changeFromMediaInlineToMedi
       var content = shouldAddParagraph(view.state) ? _model.Fragment.fromArray([node, state.schema.nodes.paragraph.create()]) : node;
       tr = (0, _utils2.safeInsert)(content, undefined, true)(state.tr);
     }
-    // TODO: add analytics specifically for change mediaInline to mediaSingle later
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent((0, _analytics2.getChangeMediaAnalytics)(_analytics.ACTION_SUBJECT_ID.MEDIA_INLINE, _analytics.ACTION_SUBJECT_ID.MEDIA_SINGLE, (0, _analytics2.findChangeFromLocation)(state.selection)))(tr);
     dispatch(tr);
   }
   return true;

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

@@ -1,6 +1,7 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
-import { getMediaNodeFromSelection, isSelectionMediaSingleNode } from '../../utils/media-common';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { getMediaSingleOrInlineNodeFromSelection, isMediaSingleOrInlineNodeSelected } from '../../utils/media-common';
 import { createCommand } from './index';
 const createCommandWithAnalytics = (actionType, action, transform) => {
   return editorAnalyticsAPI => withAnalytics(editorAnalyticsAPI, {
@@ -10,33 +11,53 @@ const createCommandWithAnalytics = (actionType, action, transform) => {
     eventType: EVENT_TYPE.TRACK
   })(createCommand(action, transform));
 };
-export const closeMediaAltTextMenu = createCommand(state => {
-  if (isSelectionMediaSingleNode(state)) {
-    return {
-      type: 'closeMediaAltTextMenu'
-    };
-  }
-  return false;
-});
+
+// pass in undefined to close the alt text menu without saving
+export const closeMediaAltTextMenuAndSave = altText => {
+  const commandTransform = typeof altText === 'string' ? updateAltTextTransform(altText) : undefined;
+  return createCommand(state => {
+    if (isMediaSingleOrInlineNodeSelected(state)) {
+      return {
+        type: 'closeMediaAltTextMenu'
+      };
+    }
+    return false;
+  }, commandTransform);
+};
+export const closeMediaAltTextMenu = closeMediaAltTextMenuAndSave();
 export const openMediaAltTextMenu = createCommandWithAnalytics(ACTION.OPENED, state => {
-  if (isSelectionMediaSingleNode(state)) {
+  if (isMediaSingleOrInlineNodeSelected(state)) {
     return {
       type: 'openMediaAltTextMenu'
     };
   }
   return false;
 }, tr => tr.setMeta('scrollIntoView', false));
-export const updateAltText = newAltText => createCommand(state => isSelectionMediaSingleNode(state) ? {
-  type: 'updateAltText'
-} : false, (tr, state) => {
-  const mediaNode = getMediaNodeFromSelection(state);
-  const pos = tr.selection.from + 1;
+export const updateAltTextTransform = newAltText => (tr, state) => {
+  const mediaNode = getMediaSingleOrInlineNodeFromSelection(state);
   if (mediaNode) {
-    tr.setMeta('scrollIntoView', false);
-    tr.setNodeMarkup(pos, undefined, {
+    const pos = mediaNode.type === state.schema.nodes.media ? tr.selection.from + 1 : tr.selection.from;
+
+    /**
+     * Any changes to attributes of a node count the node as "recreated" in Prosemirror[1]
+     * This makes it so Prosemirror resets the selection to the child i.e. "media" instead of "media-single"
+     * The recommended fix is to reset the selection.[2]
+     *
+     * [1] https://discuss.prosemirror.net/t/setnodemarkup-loses-current-nodeselection/976
+     * [2] https://discuss.prosemirror.net/t/setnodemarkup-and-deselect/3673
+     */
+    tr.setMeta('scrollIntoView', false).setNodeMarkup(pos, undefined, {
       ...mediaNode.attrs,
       alt: newAltText
-    });
+    }).setSelection(NodeSelection.create(tr.doc, pos));
   }
   return tr;
-});
+};
+export const updateAltText = newAltText => createCommand(state => {
+  if (isMediaSingleOrInlineNodeSelected(state)) {
+    return {
+      type: 'updateAltText'
+    };
+  }
+  return false;
+}, updateAltTextTransform(newAltText));

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

@@ -7,15 +7,12 @@ import { injectIntl } from 'react-intl-next';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, fireAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import { escape, ToolTipContent } from '@atlaskit/editor-common/keymaps';
-import { PanelTextInput } from '@atlaskit/editor-common/ui';
-import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
-import { RECENT_SEARCH_WIDTH_IN_PX } from '@atlaskit/editor-common/ui';
-import { ErrorMessage } from '@atlaskit/editor-common/ui';
+import { FloatingToolbarButton as Button, ErrorMessage, PanelTextInput, RECENT_SEARCH_WIDTH_IN_PX } from '@atlaskit/editor-common/ui';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import ChevronLeftLargeIcon from '@atlaskit/icon/glyph/chevron-left-large';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import { N100, N30, N80, R400 } from '@atlaskit/theme/colors';
-import { closeMediaAltTextMenu, updateAltText } from '../commands';
+import { closeMediaAltTextMenu, closeMediaAltTextMenuAndSave } from '../commands';
 import { messages } from '../messages';
 export const CONTAINER_WIDTH_IN_PX = RECENT_SEARCH_WIDTH_IN_PX;
 export const MAX_ALT_TEXT_LENGTH = 510; // double tweet length
@@ -71,7 +68,11 @@ export class AltTextEditComponent extends React.Component {
       const {
         view
       } = this.props;
-      closeMediaAltTextMenu(view.state, view.dispatch);
+      if (this.state.validationErrors.length === 0) {
+        closeMediaAltTextMenuAndSave(this.state.lastValue || '')(view.state, view.dispatch);
+      } else {
+        closeMediaAltTextMenu(view.state, view.dispatch);
+      }
     });
     _defineProperty(this, "dispatchCancelEvent", event => {
       const {
@@ -85,13 +86,6 @@ export class AltTextEditComponent extends React.Component {
       view.someProp('handleKeyDown', fn => fn(view, event));
       onEscape === null || onEscape === void 0 ? void 0 : onEscape();
     });
-    _defineProperty(this, "updateAltText", newAltText => {
-      const {
-        view
-      } = this.props;
-      const newValue = newAltText.length === 0 ? '' : newAltText;
-      updateAltText(newValue)(view.state, view.dispatch);
-    });
     _defineProperty(this, "handleOnChange", newAltText => {
       var _this$state, _this$state$validatio;
       const validationErrors = this.getValidationErrors(newAltText);
@@ -109,20 +103,12 @@ export class AltTextEditComponent extends React.Component {
         showClearTextButton: Boolean(newAltText),
         validationErrors,
         lastValue: newAltText
-      }, () => {
-        if (!validationErrors || !validationErrors.length) {
-          this.updateAltText(newAltText);
-        }
       });
     });
-    _defineProperty(this, "handleOnBlur", () => {
-      // Handling the trimming onBlur() because PanelTextInput doesn't sync
-      // defaultValue properly during unmount
-      const {
-        value
-      } = this.props;
-      const newValue = (this.state.lastValue || value || '').trim();
-      this.handleOnChange(newValue);
+    _defineProperty(this, "handleOnBlur", e => {
+      // prevent other selection transaction gets triggered
+      e.stopPropagation();
+      this.closeMediaAltTextMenu();
     });
     _defineProperty(this, "handleClearText", () => {
       this.handleOnChange('');

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

@@ -16,7 +16,7 @@ export const mediaResizeAnnouncerMess = defineMessages({
     description: 'Media width {action} to {newMediaWidth} pixels.'
   },
   IncreasedAction: {
-    id: 'fabric.editor.media.decreased',
+    id: 'fabric.editor.media.increased',
     defaultMessage: 'increased',
     description: 'Increased action'
   },

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

@@ -4,10 +4,10 @@ import { MediaSharedClassNames as ClassNames } from '@atlaskit/editor-common/sty
 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 { getMediaNodeFromSelection } from '../utils/media-common';
+import { getMediaSingleOrInlineNodeFromSelection } from '../utils/media-common';
 const testId = 'alt-text-edit-button';
 export const altTextButton = (intl, state, editorAnalyticsAPI) => {
-  const mediaNode = getMediaNodeFromSelection(state);
+  const mediaNode = getMediaSingleOrInlineNodeFromSelection(state);
   const message = mediaNode && mediaNode.attrs.alt ? messages.editAltText : messages.altText;
   const title = intl.formatMessage(message);
   return {
@@ -32,7 +32,8 @@ export const altTextEditComponent = options => {
       if (!view) {
         return null;
       }
-      const mediaNode = getMediaNodeFromSelection(view.state);
+      const state = view.state;
+      const mediaNode = getMediaSingleOrInlineNodeFromSelection(state);
       if (!mediaNode) {
         return null;
       }