@atlaskit/editor-plugin-media 0.8.1 → 0.9.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-media
 
+## 0.9.1
+
+### Patch Changes
+
+- [#63950](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63950) [`aa44815a0e60`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/aa44815a0e60) - [ux] changed color for instructions to add alt text
+- Updated dependencies
+
+## 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

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

@@ -33,7 +33,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var CONTAINER_WIDTH_IN_PX = exports.CONTAINER_WIDTH_IN_PX = _ui.RECENT_SEARCH_WIDTH_IN_PX;
 var MAX_ALT_TEXT_LENGTH = exports.MAX_ALT_TEXT_LENGTH = 510; // double tweet length
 
-var supportText = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: ", ";\n  padding: ", " ", ";\n  line-height: 20px;\n  border-top: 1px solid ", ";\n  margin: 0;\n"])), "var(--ds-text-subtlest, ".concat(_colors.N100, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)(12), "var(--ds-space-150, 12px)", "var(--ds-space-500, 40px)", "var(--ds-border, ".concat(_colors.N30, ")"));
+var supportText = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: ", ";\n  padding: ", " ", ";\n  line-height: 20px;\n  border-top: 1px solid ", ";\n  margin: 0;\n"])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)(12), "var(--ds-space-150, 12px)", "var(--ds-space-500, 40px)", "var(--ds-border, ".concat(_colors.N30, ")"));
 var container = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  line-height: 2;\n"])), CONTAINER_WIDTH_IN_PX);
 var inputWrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  line-height: 0;\n  padding: 5px 0;\n  align-items: center;\n"])));
 var validationWrapper = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  line-height: 0;\n  padding: ", " ", "\n    ", " 0;\n  margin: 0 ", " 0 ", ";\n  border-top: 1px solid ", ";\n  align-items: start;\n  flex-direction: column;\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-300, 24px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-space-500, 40px)", "var(--ds-border-danger, ".concat(_colors.R400, ")"));
@@ -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/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/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/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,21 +7,18 @@ 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 { N200, N30, N80, R400 } from '@atlaskit/theme/colors';
+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
 
 const supportText = css`
-  color: ${`var(--ds-text-subtlest, ${N100})`};
+  color: ${`var(--ds-text-subtlest, ${N200})`};
   font-size: ${relativeFontSizeToBase16(12)};
   padding: ${"var(--ds-space-150, 12px)"} ${"var(--ds-space-500, 40px)"};
   line-height: 20px;
@@ -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/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;
       }

package/dist/es2019/toolbar/mediaInline.js

@@ -9,21 +9,21 @@ import { messages } from '@atlaskit/media-ui';
 import { showLinkingToolbar } from '../commands/linking';
 import { getMediaLinkingState } from '../pm-plugins/linking';
 import { isImage } from '../utils/is-type';
+import { altTextButton } from './alt-text';
 import { changeInlineToMediaCard, changeMediaInlineToMediaSingle, removeInlineCard } from './commands';
 import { FilePreviewItem } from './filePreviewItem';
 import { LinkToolbarAppearance } from './linking-toolbar-appearance';
 import { downloadMedia } from './utils';
 export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options = {}) => {
-  var _pluginInjectionApi$a, _pluginInjectionApi$w;
+  var _pluginInjectionApi$a;
   const editorAnalyticsAPI = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions;
-  const widthPluginState = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.currentState();
   const {
     mediaInline
   } = state.schema.nodes;
   const mediaType = state.selection instanceof NodeSelection && state.selection.node.attrs.type;
   const mediaLinkingState = getMediaLinkingState(state);
   if (mediaPluginState.allowInlineImages && isImage(mediaType)) {
-    return getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, widthPluginState, pluginInjectionApi, mediaLinkingState);
+    return getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, pluginInjectionApi, mediaLinkingState, options);
   }
   const items = [{
     id: 'editor.media.view.switcher',
@@ -96,16 +96,19 @@ export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState
   }];
   return items;
 };
-export const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, widthPluginState, pluginInjectionApi, mediaLinkingState) => {
+export const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, pluginInjectionApi, mediaLinkingState, options = {}) => {
+  var _pluginInjectionApi$w;
   const {
     mediaInline
   } = state.schema.nodes;
   const mediaInlineImageTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
   const mediaSingleTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaSingle);
 
+  // TODO: border marks, media single switcher, alt text, etc
+  const widthPluginState = pluginInjectionApi === null || pluginInjectionApi === void 0 ? 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
   const 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',
@@ -129,7 +132,14 @@ export const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverD
     onClick: changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState)
   }, {
     type: 'separator'
-  }, {
+  }];
+  if (options.allowAltTextOnImages) {
+    var _pluginInjectionApi$a2;
+    inlineImageItems.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions), {
+      type: 'separator'
+    });
+  }
+  inlineImageItems.push({
     type: 'custom',
     fallback: [],
     render: (editorView, idx) => {
@@ -145,14 +155,14 @@ export const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverD
         };
         const openLink = () => {
           if (editorView) {
-            var _pluginInjectionApi$a2;
+            var _pluginInjectionApi$a3;
             const {
               state: {
                 tr
               },
               dispatch
             } = editorView;
-            pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions.attachAnalyticsEvent({
+            pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions.attachAnalyticsEvent({
               eventType: EVENT_TYPE.TRACK,
               action: ACTION.VISITED,
               actionSubject: ACTION_SUBJECT.MEDIA,
@@ -197,6 +207,6 @@ export const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverD
     title: intl.formatMessage(commonMessages.remove),
     onClick: removeInlineCard,
     testId: 'media-toolbar-remove-button'
-  }];
+  });
   return inlineImageItems;
 };

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

@@ -4,6 +4,7 @@ import { deleteSelection, splitBlock } from '@atlaskit/editor-prosemirror/comman
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findPositionOfNodeBefore } from '@atlaskit/editor-prosemirror/utils';
 import { isMediaBlobUrl } from '@atlaskit/media-client';
+import { getMediaPluginState } from '../pm-plugins/main';
 const isTemporary = id => {
   return id.indexOf('temporary:') === 0;
 };
@@ -25,6 +26,12 @@ export const isSelectionMediaSingleNode = state => {
   } = state.selection;
   return node && node.type === state.schema.nodes.mediaSingle;
 };
+export const isSelectionMediaInlineNode = state => {
+  const {
+    node
+  } = state.selection;
+  return node && node.type === state.schema.nodes.mediaInline;
+};
 export const posOfPrecedingMediaGroup = state => {
   if (!atTheBeginningOfBlock(state)) {
     return;
@@ -186,4 +193,26 @@ export const getMediaNodeFromSelection = state => {
     return mediaNode;
   }
   return null;
+};
+export const getMediaInlineNodeFromSelection = state => {
+  if (!isSelectionMediaInlineNode(state)) {
+    return null;
+  }
+  const tr = state.tr;
+  const pos = tr.selection.from;
+  const mediaNode = tr.doc.nodeAt(pos);
+  return mediaNode;
+};
+export const isMediaSingleOrInlineNodeSelected = state => {
+  const {
+    allowInlineImages
+  } = getMediaPluginState(state);
+  return isSelectionMediaSingleNode(state) || allowInlineImages && isSelectionMediaInlineNode(state);
+};
+export const getMediaSingleOrInlineNodeFromSelection = state => {
+  const {
+    allowInlineImages
+  } = getMediaPluginState(state);
+  const mediaNode = getMediaNodeFromSelection(state) || allowInlineImages && getMediaInlineNodeFromSelection(state);
+  return mediaNode || null;
 };

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

@@ -3,7 +3,8 @@ 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) { _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 { 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';
 var createCommandWithAnalytics = function createCommandWithAnalytics(actionType, action, transform) {
   return function (editorAnalyticsAPI) {
@@ -15,16 +16,22 @@ var createCommandWithAnalytics = function createCommandWithAnalytics(actionType,
     })(createCommand(action, transform));
   };
 };
-export var closeMediaAltTextMenu = createCommand(function (state) {
-  if (isSelectionMediaSingleNode(state)) {
-    return {
-      type: 'closeMediaAltTextMenu'
-    };
-  }
-  return false;
-});
+
+// pass in undefined to close the alt text menu without saving
+export var closeMediaAltTextMenuAndSave = function closeMediaAltTextMenuAndSave(altText) {
+  var commandTransform = typeof altText === 'string' ? updateAltTextTransform(altText) : undefined;
+  return createCommand(function (state) {
+    if (isMediaSingleOrInlineNodeSelected(state)) {
+      return {
+        type: 'closeMediaAltTextMenu'
+      };
+    }
+    return false;
+  }, commandTransform);
+};
+export var closeMediaAltTextMenu = closeMediaAltTextMenuAndSave();
 export var openMediaAltTextMenu = createCommandWithAnalytics(ACTION.OPENED, function (state) {
-  if (isSelectionMediaSingleNode(state)) {
+  if (isMediaSingleOrInlineNodeSelected(state)) {
     return {
       type: 'openMediaAltTextMenu'
     };
@@ -33,20 +40,34 @@ export var openMediaAltTextMenu = createCommandWithAnalytics(ACTION.OPENED, func
 }, function (tr) {
   return tr.setMeta('scrollIntoView', false);
 });
-export var updateAltText = function updateAltText(newAltText) {
-  return createCommand(function (state) {
-    return isSelectionMediaSingleNode(state) ? {
-      type: 'updateAltText'
-    } : false;
-  }, function (tr, state) {
-    var mediaNode = getMediaNodeFromSelection(state);
-    var pos = tr.selection.from + 1;
+export var updateAltTextTransform = function updateAltTextTransform(newAltText) {
+  return function (tr, state) {
+    var mediaNode = 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(NodeSelection.create(tr.doc, pos));
     }
     return tr;
-  });
+  };
+};
+export var updateAltText = function updateAltText(newAltText) {
+  return createCommand(function (state) {
+    if (isMediaSingleOrInlineNodeSelected(state)) {
+      return {
+        type: 'updateAltText'
+      };
+    }
+    return false;
+  }, updateAltTextTransform(newAltText));
 };

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

@@ -17,20 +17,17 @@ 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 { N200, N30, N80, R400 } from '@atlaskit/theme/colors';
+import { closeMediaAltTextMenu, closeMediaAltTextMenuAndSave } from '../commands';
 import { messages } from '../messages';
 export var CONTAINER_WIDTH_IN_PX = RECENT_SEARCH_WIDTH_IN_PX;
 export var MAX_ALT_TEXT_LENGTH = 510; // double tweet length
 
-var supportText = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", ";\n  padding: ", " ", ";\n  line-height: 20px;\n  border-top: 1px solid ", ";\n  margin: 0;\n"])), "var(--ds-text-subtlest, ".concat(N100, ")"), relativeFontSizeToBase16(12), "var(--ds-space-150, 12px)", "var(--ds-space-500, 40px)", "var(--ds-border, ".concat(N30, ")"));
+var supportText = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", ";\n  padding: ", " ", ";\n  line-height: 20px;\n  border-top: 1px solid ", ";\n  margin: 0;\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"), relativeFontSizeToBase16(12), "var(--ds-space-150, 12px)", "var(--ds-space-500, 40px)", "var(--ds-border, ".concat(N30, ")"));
 var container = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: ", "px;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  line-height: 2;\n"])), CONTAINER_WIDTH_IN_PX);
 var inputWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  line-height: 0;\n  padding: 5px 0;\n  align-items: center;\n"])));
 var validationWrapper = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  line-height: 0;\n  padding: ", " ", "\n    ", " 0;\n  margin: 0 ", " 0 ", ";\n  border-top: 1px solid ", ";\n  align-items: start;\n  flex-direction: column;\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-300, 24px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-space-500, 40px)", "var(--ds-border-danger, ".concat(R400, ")"));
@@ -51,7 +48,11 @@ export var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
     });
     _defineProperty(_assertThisInitialized(_this), "closeMediaAltTextMenu", function () {
       var view = _this.props.view;
-      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(_assertThisInitialized(_this), "dispatchCancelEvent", function (event) {
       var _this$props = _this.props,
@@ -66,11 +67,6 @@ export var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
       });
       onEscape === null || onEscape === void 0 || onEscape();
     });
-    _defineProperty(_assertThisInitialized(_this), "updateAltText", function (newAltText) {
-      var view = _this.props.view;
-      var newValue = newAltText.length === 0 ? '' : newAltText;
-      updateAltText(newValue)(view.state, view.dispatch);
-    });
     _defineProperty(_assertThisInitialized(_this), "handleOnChange", function (newAltText) {
       var _this$state;
       var validationErrors = _this.getValidationErrors(newAltText);
@@ -88,18 +84,12 @@ export var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
         showClearTextButton: Boolean(newAltText),
         validationErrors: validationErrors,
         lastValue: newAltText
-      }, function () {
-        if (!validationErrors || !validationErrors.length) {
-          _this.updateAltText(newAltText);
-        }
       });
     });
-    _defineProperty(_assertThisInitialized(_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);
+    _defineProperty(_assertThisInitialized(_this), "handleOnBlur", function (e) {
+      // prevent other selection transaction gets triggered
+      e.stopPropagation();
+      _this.closeMediaAltTextMenu();
     });
     _defineProperty(_assertThisInitialized(_this), "handleClearText", function () {
       _this.handleOnChange('');

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

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

package/dist/esm/toolbar/mediaInline.js

@@ -9,20 +9,20 @@ import { messages } from '@atlaskit/media-ui';
 import { showLinkingToolbar } from '../commands/linking';
 import { getMediaLinkingState } from '../pm-plugins/linking';
 import { isImage } from '../utils/is-type';
+import { altTextButton } from './alt-text';
 import { changeInlineToMediaCard, changeMediaInlineToMediaSingle, removeInlineCard } from './commands';
 import { FilePreviewItem } from './filePreviewItem';
 import { LinkToolbarAppearance } from './linking-toolbar-appearance';
 import { downloadMedia } from './utils';
 export var 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 NodeSelection && state.selection.node.attrs.type;
   var mediaLinkingState = getMediaLinkingState(state);
   if (mediaPluginState.allowInlineImages && 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',
@@ -95,14 +95,18 @@ export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloa
   }];
   return items;
 };
-export var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, widthPluginState, pluginInjectionApi, mediaLinkingState) {
+export var 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(mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
   var mediaSingleTitle = intl.formatMessage(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',
@@ -130,7 +134,14 @@ export var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(stat
     onClick: changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState)
   }, {
     type: 'separator'
-  }, {
+  }];
+  if (options.allowAltTextOnImages) {
+    var _pluginInjectionApi$a2;
+    inlineImageItems.push(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) {
@@ -144,10 +155,10 @@ export var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(stat
         };
         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: EVENT_TYPE.TRACK,
               action: ACTION.VISITED,
               actionSubject: ACTION_SUBJECT.MEDIA,
@@ -192,6 +203,6 @@ export var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(stat
     title: intl.formatMessage(commonMessages.remove),
     onClick: removeInlineCard,
     testId: 'media-toolbar-remove-button'
-  }];
+  });
   return inlineImageItems;
 };

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

@@ -4,6 +4,7 @@ import { deleteSelection, splitBlock } from '@atlaskit/editor-prosemirror/comman
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findPositionOfNodeBefore } from '@atlaskit/editor-prosemirror/utils';
 import { isMediaBlobUrl } from '@atlaskit/media-client';
+import { getMediaPluginState } from '../pm-plugins/main';
 var isTemporary = function isTemporary(id) {
   return id.indexOf('temporary:') === 0;
 };
@@ -23,6 +24,11 @@ export var isSelectionMediaSingleNode = function isSelectionMediaSingleNode(stat
     node = _ref2.node;
   return node && node.type === state.schema.nodes.mediaSingle;
 };
+export var isSelectionMediaInlineNode = function isSelectionMediaInlineNode(state) {
+  var _ref3 = state.selection,
+    node = _ref3.node;
+  return node && node.type === state.schema.nodes.mediaInline;
+};
 export var posOfPrecedingMediaGroup = function posOfPrecedingMediaGroup(state) {
   if (!atTheBeginningOfBlock(state)) {
     return;
@@ -172,4 +178,24 @@ export var getMediaNodeFromSelection = function getMediaNodeFromSelection(state)
     return mediaNode;
   }
   return null;
+};
+export var 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;
+};
+export var isMediaSingleOrInlineNodeSelected = function isMediaSingleOrInlineNodeSelected(state) {
+  var _getMediaPluginState = getMediaPluginState(state),
+    allowInlineImages = _getMediaPluginState.allowInlineImages;
+  return isSelectionMediaSingleNode(state) || allowInlineImages && isSelectionMediaInlineNode(state);
+};
+export var getMediaSingleOrInlineNodeFromSelection = function getMediaSingleOrInlineNodeFromSelection(state) {
+  var _getMediaPluginState2 = getMediaPluginState(state),
+    allowInlineImages = _getMediaPluginState2.allowInlineImages;
+  var mediaNode = getMediaNodeFromSelection(state) || allowInlineImages && getMediaInlineNodeFromSelection(state);
+  return mediaNode || null;
 };

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

@@ -1,4 +1,7 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
+export declare const closeMediaAltTextMenuAndSave: (altText?: string) => import("@atlaskit/editor-common/types").Command;
 export declare const closeMediaAltTextMenu: import("@atlaskit/editor-common/types").Command;
 export declare const openMediaAltTextMenu: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => import("@atlaskit/editor-common/types").Command;
+export declare const updateAltTextTransform: (newAltText: string) => (tr: Transaction, state: EditorState) => Transaction;
 export declare const updateAltText: (newAltText: string) => import("@atlaskit/editor-common/types").Command;

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

@@ -33,7 +33,6 @@ export declare class AltTextEditComponent extends React.Component<Props, AltText
     private closeMediaAltTextMenu;
     private fireAnalytics;
     private dispatchCancelEvent;
-    private updateAltText;
     private handleOnChange;
     private handleOnBlur;
     private handleClearText;

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

@@ -2,11 +2,10 @@ import type { IntlShape } from 'react-intl-next';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command, ExtractInjectionAPI, FloatingToolbarItem } from '@atlaskit/editor-common/types';
 import type { HoverDecorationHandler } from '@atlaskit/editor-plugin-decorations';
-import type { WidthPluginState } from '@atlaskit/editor-plugin-width';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { MediaNextEditorPluginType } from '../next-plugin-type';
 import type { MediaLinkingState } from '../pm-plugins/linking';
 import type { MediaPluginState } from '../pm-plugins/types';
 import type { MediaFloatingToolbarOptions } from '../types';
 export declare const generateMediaInlineFloatingToolbar: (state: EditorState, intl: IntlShape, mediaPluginState: MediaPluginState, hoverDecoration: HoverDecorationHandler | undefined, pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined, options?: MediaFloatingToolbarOptions) => FloatingToolbarItem<Command>[];
-export declare const getMediaInlineImageToolbar: (state: EditorState, intl: IntlShape, mediaPluginState: MediaPluginState, hoverDecoration: HoverDecorationHandler | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, widthPluginState: WidthPluginState | undefined, pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined, mediaLinkingState: MediaLinkingState) => FloatingToolbarItem<Command>[];
+export declare const getMediaInlineImageToolbar: (state: EditorState, intl: IntlShape, mediaPluginState: MediaPluginState, hoverDecoration: HoverDecorationHandler | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined, mediaLinkingState: MediaLinkingState, options?: MediaFloatingToolbarOptions) => FloatingToolbarItem<Command>[];

package/dist/types/utils/media-common.d.ts

@@ -7,6 +7,7 @@ export declare const isMediaBlobUrlFromAttrs: (attrs: MediaADFAttrs) => boolean;
 export declare const posOfMediaGroupNearby: (state: EditorState) => number | undefined;
 export declare const isSelectionNonMediaBlockNode: (state: EditorState) => boolean;
 export declare const isSelectionMediaSingleNode: (state: EditorState) => boolean;
+export declare const isSelectionMediaInlineNode: (state: EditorState) => boolean;
 export declare const posOfPrecedingMediaGroup: (state: EditorState) => number | undefined;
 /**
  * Determine whether the cursor is inside empty paragraph
@@ -18,3 +19,6 @@ export declare const removeMediaNode: (view: EditorView, node: PMNode, getPos: P
 export declare const splitMediaGroup: (view: EditorView) => boolean;
 export declare const copyOptionalAttrsFromMediaState: (mediaState: MediaState, node: PMNode) => void;
 export declare const getMediaNodeFromSelection: (state: EditorState) => PMNode | null;
+export declare const getMediaInlineNodeFromSelection: (state: EditorState) => PMNode | null;
+export declare const isMediaSingleOrInlineNodeSelected: (state: EditorState) => boolean | undefined;
+export declare const getMediaSingleOrInlineNodeFromSelection: (state: EditorState) => PMNode | null;

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

@@ -1,4 +1,7 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
+export declare const closeMediaAltTextMenuAndSave: (altText?: string) => import("@atlaskit/editor-common/types").Command;
 export declare const closeMediaAltTextMenu: import("@atlaskit/editor-common/types").Command;
 export declare const openMediaAltTextMenu: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => import("@atlaskit/editor-common/types").Command;
+export declare const updateAltTextTransform: (newAltText: string) => (tr: Transaction, state: EditorState) => Transaction;
 export declare const updateAltText: (newAltText: string) => import("@atlaskit/editor-common/types").Command;

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

@@ -33,7 +33,6 @@ export declare class AltTextEditComponent extends React.Component<Props, AltText
     private closeMediaAltTextMenu;
     private fireAnalytics;
     private dispatchCancelEvent;
-    private updateAltText;
     private handleOnChange;
     private handleOnBlur;
     private handleClearText;

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

@@ -2,11 +2,10 @@ import type { IntlShape } from 'react-intl-next';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command, ExtractInjectionAPI, FloatingToolbarItem } from '@atlaskit/editor-common/types';
 import type { HoverDecorationHandler } from '@atlaskit/editor-plugin-decorations';
-import type { WidthPluginState } from '@atlaskit/editor-plugin-width';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { MediaNextEditorPluginType } from '../next-plugin-type';
 import type { MediaLinkingState } from '../pm-plugins/linking';
 import type { MediaPluginState } from '../pm-plugins/types';
 import type { MediaFloatingToolbarOptions } from '../types';
 export declare const generateMediaInlineFloatingToolbar: (state: EditorState, intl: IntlShape, mediaPluginState: MediaPluginState, hoverDecoration: HoverDecorationHandler | undefined, pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined, options?: MediaFloatingToolbarOptions) => FloatingToolbarItem<Command>[];
-export declare const getMediaInlineImageToolbar: (state: EditorState, intl: IntlShape, mediaPluginState: MediaPluginState, hoverDecoration: HoverDecorationHandler | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, widthPluginState: WidthPluginState | undefined, pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined, mediaLinkingState: MediaLinkingState) => FloatingToolbarItem<Command>[];
+export declare const getMediaInlineImageToolbar: (state: EditorState, intl: IntlShape, mediaPluginState: MediaPluginState, hoverDecoration: HoverDecorationHandler | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined, mediaLinkingState: MediaLinkingState, options?: MediaFloatingToolbarOptions) => FloatingToolbarItem<Command>[];

package/dist/types-ts4.5/utils/media-common.d.ts

@@ -7,6 +7,7 @@ export declare const isMediaBlobUrlFromAttrs: (attrs: MediaADFAttrs) => boolean;
 export declare const posOfMediaGroupNearby: (state: EditorState) => number | undefined;
 export declare const isSelectionNonMediaBlockNode: (state: EditorState) => boolean;
 export declare const isSelectionMediaSingleNode: (state: EditorState) => boolean;
+export declare const isSelectionMediaInlineNode: (state: EditorState) => boolean;
 export declare const posOfPrecedingMediaGroup: (state: EditorState) => number | undefined;
 /**
  * Determine whether the cursor is inside empty paragraph
@@ -18,3 +19,6 @@ export declare const removeMediaNode: (view: EditorView, node: PMNode, getPos: P
 export declare const splitMediaGroup: (view: EditorView) => boolean;
 export declare const copyOptionalAttrsFromMediaState: (mediaState: MediaState, node: PMNode) => void;
 export declare const getMediaNodeFromSelection: (state: EditorState) => PMNode | null;
+export declare const getMediaInlineNodeFromSelection: (state: EditorState) => PMNode | null;
+export declare const isMediaSingleOrInlineNodeSelected: (state: EditorState) => boolean | undefined;
+export declare const getMediaSingleOrInlineNodeFromSelection: (state: EditorState) => PMNode | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-media",
-  "version": "0.8.1",
+  "version": "0.9.1",
   "description": "Media plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -36,8 +36,8 @@
     "@atlaskit/adf-schema": "^35.2.0",
     "@atlaskit/analytics-namespaced-context": "^6.7.0",
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/button": "^17.1.0",
-    "@atlaskit/editor-common": "^76.29.0",
+    "@atlaskit/button": "^17.2.0",
+    "@atlaskit/editor-common": "^76.34.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^0.4.0",
     "@atlaskit/editor-plugin-decorations": "^0.2.0",
@@ -50,7 +50,7 @@
     "@atlaskit/editor-plugin-selection": "^0.1.0",
     "@atlaskit/editor-plugin-width": "^0.2.0",
     "@atlaskit/editor-prosemirror": "1.1.0",
-    "@atlaskit/editor-shared-styles": "^2.6.0",
+    "@atlaskit/editor-shared-styles": "^2.9.0",
     "@atlaskit/editor-tables": "^2.3.0",
     "@atlaskit/form": "^9.0.3",
     "@atlaskit/icon": "^22.0.0",
@@ -65,7 +65,7 @@
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/textfield": "^6.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.32.0",
+    "@atlaskit/tokens": "^1.33.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",