@atlaskit/editor-plugin-media 3.0.1 → 3.0.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-media
 
+## 3.0.3
+
+### Patch Changes
+
+- [#153256](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/153256)
+  [`3644fbe36073d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3644fbe36073d) -
+  [ux] When ViewAll dropdown closes via ESC key press or submenus close via ESC or Enter, the focus
+  is set on ViewAll button.
+- Updated dependencies
+
+## 3.0.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.0.1
 
 ### Patch Changes

package/dist/cjs/mediaPlugin.js

@@ -366,7 +366,8 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
           fullWidthEnabled: options && options.fullWidthEnabled,
           allowMediaInlineImages: options && options.allowMediaInlineImages,
           isViewOnly: (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view',
-          allowPixelResizing: options === null || options === void 0 ? void 0 : options.allowPixelResizing
+          allowPixelResizing: options === null || options === void 0 ? void 0 : options.allowPixelResizing,
+          onCommentButtonMount: options === null || options === void 0 ? void 0 : options.onCommentButtonMount
         }, api);
       }
     }

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

@@ -22,7 +22,9 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/cross-circle"));
 var _chevronLeftChevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-left--chevron-left-large"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("../commands");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
@@ -93,11 +95,15 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
         (0, _commands.closeMediaAltTextMenu)(view.state, view.dispatch);
       }
     });
+    (0, _defineProperty2.default)(_this, "closeMediaAltTextMenuAndSetFocus", function () {
+      var _this$props$onEnter, _this$props;
+      _this.closeMediaAltTextMenu();
+      (_this$props$onEnter = (_this$props = _this.props).onEnter) === null || _this$props$onEnter === void 0 || _this$props$onEnter.call(_this$props);
+    });
     (0, _defineProperty2.default)(_this, "dispatchCancelEvent", function (event) {
-      var _this$props = _this.props,
-        view = _this$props.view,
-        onEscape = _this$props.onEscape;
-
+      var _this$props2 = _this.props,
+        view = _this$props2.view,
+        onEscape = _this$props2.onEscape;
       // We need to pass down the ESCAPE keymap
       // because when we focus on the Toolbar, Prosemirror blur,
       // making all keyboard shortcuts not working
@@ -130,7 +136,11 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
     (0, _defineProperty2.default)(_this, "handleOnBlur", function (e) {
       // prevent other selection transaction gets triggered
       e.stopPropagation();
-      _this.closeMediaAltTextMenu();
+      if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_8')) {
+        _this.closeMediaAltTextMenuAndSetFocus();
+      } else {
+        _this.closeMediaAltTextMenu(); // Why do we close the menu on blur? Is it a bug?
+      }
     });
     (0, _defineProperty2.default)(_this, "handleClearText", function () {
       _this.handleOnChange('');
@@ -188,6 +198,7 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
         }, error);
       });
       var hasErrors = !!errorsList.length;
+      var onSubmit = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_8') ? this.closeMediaAltTextMenuAndSetFocus : this.closeMediaAltTextMenu;
       return (0, _react2.jsx)("div", {
         css: containerStyles
       }, (0, _react2.jsx)("section", {
@@ -210,7 +221,7 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
         onCancel: this.dispatchCancelEvent,
         onChange: this.handleOnChange,
         onBlur: this.handleOnBlur,
-        onSubmit: this.closeMediaAltTextMenu,
+        onSubmit: onSubmit,
         maxLength: MAX_ALT_TEXT_LENGTH,
         ariaRequired: true,
         ariaInvalid: hasErrors,
@@ -240,10 +251,10 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
   }, {
     key: "fireAnalytics",
     value: function fireAnalytics(actionType) {
-      var _this$props2 = this.props,
-        createAnalyticsEvent = _this$props2.createAnalyticsEvent,
-        nodeType = _this$props2.nodeType,
-        mediaType = _this$props2.mediaType;
+      var _this$props3 = this.props,
+        createAnalyticsEvent = _this$props3.createAnalyticsEvent,
+        nodeType = _this$props3.nodeType,
+        mediaType = _this$props3.mediaType;
       if (createAnalyticsEvent && this.fireCustomAnalytics) {
         this.fireCustomAnalytics({
           payload: {

package/dist/cjs/pm-plugins/pixel-resizing/ui/index.js

@@ -26,14 +26,15 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var PixelEntry = exports.PixelEntry = function PixelEntry(_ref) {
-  var _pluginInjectionApi$w, _pluginInjectionApi$m;
+  var _pluginInjectionApi$w, _pluginInjectionApi$m, _pluginInjectionApi$f;
   var editorView = _ref.editorView,
     selectedMediaSingleNode = _ref.selectedMediaSingleNode,
     pluginInjectionApi = _ref.pluginInjectionApi,
     intl = _ref.intl,
     pluginState = _ref.pluginState,
     hoverDecoration = _ref.hoverDecoration,
-    isEditorFullWidthEnabled = _ref.isEditorFullWidthEnabled;
+    isEditorFullWidthEnabled = _ref.isEditorFullWidthEnabled,
+    triggerButtonSelector = _ref.triggerButtonSelector;
   var state = editorView.state,
     dispatch = editorView.dispatch;
   var mediaSingle = state.schema.nodes.mediaSingle;
@@ -68,6 +69,7 @@ var PixelEntry = exports.PixelEntry = function PixelEntry(_ref) {
   // get pos of media node
   mediaWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH);
   var pixelWidth = hasPixelType ? mediaSingleWidth : pixelWidthFromElement;
+  var forceFocusSelector = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f === void 0 || (_pluginInjectionApi$f = _pluginInjectionApi$f.actions) === null || _pluginInjectionApi$f === void 0 ? void 0 : _pluginInjectionApi$f.forceFocusSelector;
   return (0, _react2.jsx)(_pixelEntry.PixelEntryComponent, {
     intl: intl,
     width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
@@ -98,19 +100,28 @@ var PixelEntry = exports.PixelEntry = function PixelEntry(_ref) {
       }));
       tr.setMeta('scrollIntoView', false);
       tr.setSelection(_state.NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
+      if (triggerButtonSelector) {
+        var newTr = forceFocusSelector && forceFocusSelector(triggerButtonSelector)(tr);
+        tr = newTr !== undefined ? newTr : tr;
+      }
       dispatch(tr);
     },
-    onCloseAndSave: function onCloseAndSave(_ref3) {
+    onCloseAndSave: function onCloseAndSave(_ref3, setFocus) {
       var width = _ref3.width,
         validation = _ref3.validation;
       var tr = updateNodeWithTr(width, validation);
+      if (setFocus && triggerButtonSelector) {
+        var newTr = forceFocusSelector && tr && forceFocusSelector(triggerButtonSelector)(tr);
+        tr = newTr !== undefined ? newTr : tr;
+      }
       if (tr) {
         return (0, _commands2.closePixelEditorAndSave)(function () {
           return tr;
         })(state, dispatch);
       }
     },
-    isViewMode: pluginState.isResizing
+    isViewMode: pluginState.isResizing,
+    triggerButtonSelector: triggerButtonSelector
   });
 };
 var FullWidthDisplay = exports.FullWidthDisplay = function FullWidthDisplay(_ref4) {

package/dist/cjs/pm-plugins/pixel-resizing/ui/pixel-entry.js

@@ -15,6 +15,7 @@ var _new = require("@atlaskit/button/new");
 var _media = require("@atlaskit/editor-common/media");
 var _form = _interopRequireWildcard(require("@atlaskit/form"));
 var _close = _interopRequireDefault(require("@atlaskit/icon/core/close"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
@@ -100,7 +101,7 @@ var PixelEntryComponent = exports.PixelEntryComponent = function PixelEntryCompo
   };
 
   // Handle submit when user presses enter or click close button in PixelEntryComponentNext
-  var handleCloseAndSave = (0, _react.useCallback)(function (data) {
+  var handleCloseAndSave = (0, _react.useCallback)(function (data, setFocus) {
     if (data.inputWidth === '' || data.inputHeight === '') {
       return;
     }
@@ -126,7 +127,7 @@ var PixelEntryComponent = exports.PixelEntryComponent = function PixelEntryCompo
       onCloseAndSave({
         width: widthToBeSubmitted,
         validation: validation
-      });
+      }, setFocus);
     }
   }, [maxWidth, minWidth, onCloseAndSave, ratioWidth]);
 
@@ -292,10 +293,11 @@ var PixelEntryComponentNext = exports.PixelEntryComponentNext = function PixelEn
   }, [isViewMode, widthInputRef]);
   var handleKeyDown = (0, _react.useCallback)(function (event) {
     if (event.key === 'Enter') {
+      var shouldSetFocus = true;
       handleCloseAndSave({
         inputWidth: computedWidth,
         inputHeight: computedHeight
-      });
+      }, shouldSetFocus);
     }
   }, [computedWidth, computedHeight, handleCloseAndSave]);
   return (0, _react2.jsx)(_primitives.Box, {
@@ -364,6 +366,7 @@ var PixelEntryComponentNext = exports.PixelEntryComponentNext = function PixelEn
         inputWidth: computedWidth,
         inputHeight: computedHeight
       });
-    }
+    },
+    onKeyDown: (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_8') ? handleKeyDown : undefined
   }))));
 };

package/dist/cjs/ui/MediaLinkingToolbar.js

@@ -63,14 +63,14 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
         inputMethod: inputMethod
       });
     });
-    (0, _defineProperty2.default)(_this, "handleOnBack", function (_ref2) {
+    (0, _defineProperty2.default)(_this, "handleOnBack", function (_ref2, setFocus) {
       var url = _ref2.url,
         inputMethod = _ref2.inputMethod;
       var onBack = _this.props.onBack;
       if (onBack) {
         onBack(url, {
           inputMethod: inputMethod
-        });
+        }, setFocus);
       }
     });
     (0, _defineProperty2.default)(_this, "handleCancel", function () {
@@ -79,10 +79,10 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
         onCancel();
       }
     });
-    (0, _defineProperty2.default)(_this, "handleUnlink", function () {
+    (0, _defineProperty2.default)(_this, "handleUnlink", function (setFocus) {
       var onUnlink = _this.props.onUnlink;
       if (onUnlink) {
-        onUnlink();
+        onUnlink(setFocus);
       }
     });
     (0, _defineProperty2.default)(_this, "handleOnBlur", function (options) {
@@ -132,6 +132,14 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
               url: value,
               inputMethod: currentInputMethod
             });
+          },
+          onKeyDown: function onKeyDown(event) {
+            if (event.key === 'Enter') {
+              _this.handleOnBack({
+                url: value,
+                inputMethod: currentInputMethod
+              }, true);
+            }
           }
         })), (0, _react2.jsx)(_ui.PanelTextInput, {
           inputId: "media-link-search-input",
@@ -164,7 +172,14 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
           icon: (0, _react2.jsx)(_linkBrokenEditorUnlink.default, {
             label: formatUnlinkText
           }),
-          onClick: _this.handleUnlink
+          onClick: function onClick() {
+            return _this.handleUnlink();
+          },
+          onKeyDown: function onKeyDown(event) {
+            if (event.key === 'Enter') {
+              _this.handleUnlink(true);
+            }
+          }
         }))), !!errorsList.length && (0, _react2.jsx)("section", {
           css: validationWrapper
         }, errorsList), renderRecentList()))

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

@@ -13,6 +13,8 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _text = _interopRequireDefault(require("@atlaskit/icon/core/text"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("../../pm-plugins/alt-text/commands");
 var _AltTextEdit = _interopRequireDefault(require("../../pm-plugins/alt-text/ui/AltTextEdit"));
 var _isType = require("../../pm-plugins/utils/is-type");
@@ -55,11 +57,12 @@ var altTextEditComponent = function altTextEditComponent(options) {
       /** Focus should move to the 'Alt text' button when the toolbar closes
        * and not close the floating toolbar.
        */
-      var handleEsc = function handleEsc() {
+      var setFocus = function setFocus() {
         var _options$forceFocusSe;
         var tr = view.state.tr,
           dispatch = view.dispatch;
-        var newTr = options === null || options === void 0 || (_options$forceFocusSe = options.forceFocusSelector) === null || _options$forceFocusSe === void 0 ? void 0 : _options$forceFocusSe.call(options, "[data-testid=\"".concat(testId, "\"]"))(tr);
+        var elementSelector = options !== null && options !== void 0 && options.triggerButtonSelector && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_8') ? options.triggerButtonSelector : "[data-testid=\"".concat(testId, "\"]");
+        var newTr = options === null || options === void 0 || (_options$forceFocusSe = options.forceFocusSelector) === null || _options$forceFocusSe === void 0 ? void 0 : _options$forceFocusSe.call(options, elementSelector)(tr);
         if (newTr) {
           dispatch(newTr);
         }
@@ -72,7 +75,8 @@ var altTextEditComponent = function altTextEditComponent(options) {
         mediaType: mediaNode.attrs.type,
         value: mediaNode.attrs.alt,
         altTextValidator: options && options.altTextValidator,
-        onEscape: handleEsc
+        onEscape: setFocus,
+        onEnter: setFocus
       });
     }
   };

package/dist/cjs/ui/toolbar/comments.js

@@ -15,7 +15,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commentWithDotIcon = require("./assets/commentWithDotIcon");
 var _utils = require("./utils");
-var commentButton = exports.commentButton = function commentButton(intl, state, api) {
+var commentButton = exports.commentButton = function commentButton(intl, state, api, onCommentButtonMount) {
   var _getSelectedMediaSing, _api$annotation, _api$connectivity;
   var selectMediaNode = (_getSelectedMediaSing = (0, _utils.getSelectedMediaSingle)(state)) === null || _getSelectedMediaSing === void 0 ? void 0 : _getSelectedMediaSing.node.firstChild;
   var hasActiveComments = false;
@@ -54,6 +54,11 @@ var commentButton = exports.commentButton = function commentButton(intl, state,
       description: title
     }),
     supportsViewMode: true,
-    disabled: (api === null || api === void 0 || (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.sharedState) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.currentState()) === null || _api$connectivity === void 0 ? void 0 : _api$connectivity.mode) === 'offline'
+    disabled: (api === null || api === void 0 || (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.sharedState) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.currentState()) === null || _api$connectivity === void 0 ? void 0 : _api$connectivity.mode) === 'offline',
+    onMount: function onMount() {
+      if ((0, _platformFeatureFlags.fg)('confluence_frontend_preload_inline_comment_editor')) {
+        onCommentButtonMount && onCommentButtonMount();
+      }
+    }
   };
 };

package/dist/cjs/ui/toolbar/index.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.handleShowMediaViewer = exports.floatingToolbar = void 0;
+exports.overflowDropdwonBtnTriggerTestId = exports.handleShowMediaViewer = exports.floatingToolbar = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -279,7 +279,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     allowMediaInlineImages = options.allowMediaInlineImages,
     allowImagePreview = options.allowImagePreview,
     isViewOnly = options.isViewOnly,
-    allowPixelResizing = options.allowPixelResizing;
+    allowPixelResizing = options.allowPixelResizing,
+    onCommentButtonMount = options.onCommentButtonMount;
   var toolbarButtons = [];
   var _ref2 = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d2 = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {},
     hoverDecoration = _ref2.hoverDecoration;
@@ -549,7 +550,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     }
     if (!isEditorControlsEnabled) {
       if (allowCommentsOnMedia) {
-        toolbarButtons.push((0, _comments.commentButton)(intl, state, pluginInjectionApi), {
+        toolbarButtons.push((0, _comments.commentButton)(intl, state, pluginInjectionApi, onCommentButtonMount), {
           type: 'separator',
           supportsViewMode: true
         });
@@ -736,7 +737,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     });
     if (allowAdvancedToolBarOptions && allowCommentsOnMedia) {
       (0, _utils2.updateToFullHeightSeparator)(toolbarButtons);
-      toolbarButtons.push((0, _comments.commentButton)(intl, state, pluginInjectionApi));
+      toolbarButtons.push((0, _comments.commentButton)(intl, state, pluginInjectionApi, onCommentButtonMount));
     }
     return toolbarButtons;
   }
@@ -747,6 +748,7 @@ var getMediaTypeMessage = function getMediaTypeMessage(selectedNodeTypeSingle) {
   });
   return mediaType ? mediaTypeMessages[mediaType] : _mediaUi.messages.file_unknown_is_selected;
 };
+var overflowDropdwonBtnTriggerTestId = exports.overflowDropdwonBtnTriggerTestId = 'media-overflow-dropdown-trigger';
 var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state, intl) {
   var _pluginInjectionApi$d3, _pluginInjectionApi$d4;
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
@@ -792,13 +794,18 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
       return linkingToolbar;
     }
   }
+
+  // testId is required to show focus on trigger button on ESC key press
+  // see hideOnEsc in platform/packages/editor/editor-plugin-floating-toolbar/src/ui/Dropdown.tsx
+  var overflowButtonSelector = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_8') ? "[data-testid=\"".concat(overflowDropdwonBtnTriggerTestId, "\"]") : undefined;
   if (allowAltTextOnImages) {
     var mediaAltTextPluginState = (0, _altText.getPluginState)(state);
     if (mediaAltTextPluginState.isAltTextEditorOpen) {
       var _pluginInjectionApi$f;
       return (0, _altText2.getAltTextToolbar)(baseToolbar, {
         altTextValidator: altTextValidator,
-        forceFocusSelector: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f === void 0 || (_pluginInjectionApi$f = _pluginInjectionApi$f.actions) === null || _pluginInjectionApi$f === void 0 ? void 0 : _pluginInjectionApi$f.forceFocusSelector
+        forceFocusSelector: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f === void 0 || (_pluginInjectionApi$f = _pluginInjectionApi$f.actions) === null || _pluginInjectionApi$f === void 0 ? void 0 : _pluginInjectionApi$f.forceFocusSelector,
+        triggerButtonSelector: overflowButtonSelector
       });
     }
   }
@@ -812,7 +819,8 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
         pluginInjectionApi: pluginInjectionApi,
         pluginState: mediaPluginState,
         hoverDecoration: hoverDecoration,
-        isEditorFullWidthEnabled: options.fullWidthEnabled
+        isEditorFullWidthEnabled: options.fullWidthEnabled,
+        triggerButtonSelector: overflowButtonSelector
       });
     }
   }
@@ -865,6 +873,7 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
     items.push({
       type: 'overflow-dropdown',
       id: 'media',
+      testId: overflowDropdwonBtnTriggerTestId,
       options: [].concat((0, _toConsumableArray2.default)(customOptions), [_objectSpread({
         title: intl === null || intl === void 0 ? void 0 : intl.formatMessage(_messages.default.copyToClipboard),
         onClick: function onClick() {

package/dist/cjs/ui/toolbar/linking.js

@@ -15,6 +15,7 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _link = _interopRequireDefault(require("@atlaskit/icon/core/link"));
 var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _linking = require("../../pm-plugins/commands/linking");
 var _linking2 = require("../../pm-plugins/linking");
 var _currentMediaNode = require("../../pm-plugins/utils/current-media-node");
@@ -22,6 +23,7 @@ var _MediaLinkingToolbar = _interopRequireDefault(require("../../ui/MediaLinking
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FORCE_FOCUS_SELECTOR = '[data-testid="add-link-button"],[data-testid="edit-link-button"]';
+var FORCE_FOCUS_SELECTOR_EDITOR_CONTROLS = '[data-testid="media-overflow-dropdown-trigger"]';
 function shouldShowMediaLinkToolbar(editorState) {
   var mediaLinkingState = (0, _linking2.getMediaLinkingState)(editorState);
   if (!mediaLinkingState || mediaLinkingState.mediaPos === null) {
@@ -60,38 +62,51 @@ var getLinkingToolbar = exports.getLinkingToolbar = function getLinkingToolbar(t
             if (!view || !providerFactory) {
               return null;
             }
+            var setFocusOnFloatingToolbar = function setFocusOnFloatingToolbar(setFocus) {
+              if (setFocus && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_8')) {
+                var _pluginInjectionApi$f;
+                var tr = view.state.tr,
+                  dispatch = view.dispatch;
+                pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f === void 0 || (_pluginInjectionApi$f = _pluginInjectionApi$f.actions) === null || _pluginInjectionApi$f === void 0 || _pluginInjectionApi$f.forceFocusSelector(FORCE_FOCUS_SELECTOR_EDITOR_CONTROLS)(tr);
+                dispatch(tr);
+              }
+            };
             return /*#__PURE__*/_react.default.createElement(_MediaLinkingToolbar.default, {
               key: idx,
               displayUrl: link,
               providerFactory: providerFactory,
               intl: intl,
               editing: editing,
-              onUnlink: function onUnlink() {
+              onUnlink: function onUnlink(setFocus) {
                 var _pluginInjectionApi$a;
-                return (0, _linking.unlink)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(view.state, view.dispatch, view);
+                (0, _linking.unlink)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(view.state, view.dispatch, view);
+                setFocusOnFloatingToolbar(setFocus);
               },
-              onBack: function onBack(href, meta) {
+              onBack: function onBack(href, meta, setFocus) {
                 if (href.trim() && meta.inputMethod) {
                   var _pluginInjectionApi$a2;
                   (0, _linking.setUrlToMedia)(href, meta.inputMethod, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions)(view.state, view.dispatch, view);
                 }
                 (0, _linking.hideLinkingToolbar)(view.state, view.dispatch, view);
+                setFocusOnFloatingToolbar(setFocus);
               },
               onCancel: function onCancel() {
-                var _pluginInjectionApi$f;
+                var _pluginInjectionApi$f2;
                 (0, _linking.hideLinkingToolbar)(view.state, view.dispatch, view, true);
                 /** Focus should move to the 'Add link' button when the toolbar closes
                  * and not close the floating toolbar.
                  */
                 var tr = view.state.tr,
                   dispatch = view.dispatch;
-                pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f === void 0 || (_pluginInjectionApi$f = _pluginInjectionApi$f.actions) === null || _pluginInjectionApi$f === void 0 || _pluginInjectionApi$f.forceFocusSelector(FORCE_FOCUS_SELECTOR)(tr);
+                var selector = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_8') ? FORCE_FOCUS_SELECTOR_EDITOR_CONTROLS : FORCE_FOCUS_SELECTOR;
+                pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 || (_pluginInjectionApi$f2 = _pluginInjectionApi$f2.actions) === null || _pluginInjectionApi$f2 === void 0 || _pluginInjectionApi$f2.forceFocusSelector(selector)(tr);
                 dispatch(tr);
               },
               onSubmit: function onSubmit(href, meta) {
                 var _pluginInjectionApi$a3;
                 (0, _linking.setUrlToMedia)(href, meta.inputMethod, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions)(view.state, view.dispatch, view);
                 (0, _linking.hideLinkingToolbar)(view.state, view.dispatch, view);
+                setFocusOnFloatingToolbar(true);
               },
               onBlur: function onBlur() {
                 (0, _linking.hideLinkingToolbar)(view.state, view.dispatch, view);

package/dist/cjs/ui/toolbar/pixel-resizing.js

@@ -23,7 +23,8 @@ var getPixelResizingToolbar = exports.getPixelResizingToolbar = function getPixe
     intl = _ref.intl,
     pluginState = _ref.pluginState,
     hoverDecoration = _ref.hoverDecoration,
-    isEditorFullWidthEnabled = _ref.isEditorFullWidthEnabled;
+    isEditorFullWidthEnabled = _ref.isEditorFullWidthEnabled,
+    triggerButtonSelector = _ref.triggerButtonSelector;
   return _objectSpread(_objectSpread({}, toolbarBaseConfig), {}, {
     width: _constants.PIXEL_RESIZING_TOOLBAR_WIDTH,
     scrollable: true,
@@ -45,7 +46,8 @@ var getPixelResizingToolbar = exports.getPixelResizingToolbar = function getPixe
           pluginInjectionApi: pluginInjectionApi,
           pluginState: pluginState,
           hoverDecoration: hoverDecoration,
-          isEditorFullWidthEnabled: isEditorFullWidthEnabled
+          isEditorFullWidthEnabled: isEditorFullWidthEnabled,
+          triggerButtonSelector: triggerButtonSelector
         });
       }
     }]

package/dist/es2019/mediaPlugin.js

@@ -361,7 +361,8 @@ export const mediaPlugin = ({
           fullWidthEnabled: options && options.fullWidthEnabled,
           allowMediaInlineImages: options && options.allowMediaInlineImages,
           isViewOnly: (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'view',
-          allowPixelResizing: options === null || options === void 0 ? void 0 : options.allowPixelResizing
+          allowPixelResizing: options === null || options === void 0 ? void 0 : options.allowPixelResizing,
+          onCommentButtonMount: options === null || options === void 0 ? void 0 : options.onCommentButtonMount
         }, api);
       }
     }

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

@@ -17,7 +17,9 @@ import { RECENT_SEARCH_WIDTH_IN_PX as CONTAINER_WIDTH_IN_PX, FloatingToolbarButt
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import CrossCircleIcon from '@atlaskit/icon/core/migration/cross-circle';
 import ChevronLeftLargeIcon from '@atlaskit/icon/utility/migration/chevron-left--chevron-left-large';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N200, N30, N80, R400 } from '@atlaskit/theme/colors';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { closeMediaAltTextMenu, closeMediaAltTextMenuAndSave } from '../commands';
 export const MAX_ALT_TEXT_LENGTH = 510; // double tweet length
 
@@ -83,12 +85,16 @@ export class AltTextEditComponent extends React.Component {
         closeMediaAltTextMenu(view.state, view.dispatch);
       }
     });
+    _defineProperty(this, "closeMediaAltTextMenuAndSetFocus", () => {
+      var _this$props$onEnter, _this$props;
+      this.closeMediaAltTextMenu();
+      (_this$props$onEnter = (_this$props = this.props).onEnter) === null || _this$props$onEnter === void 0 ? void 0 : _this$props$onEnter.call(_this$props);
+    });
     _defineProperty(this, "dispatchCancelEvent", event => {
       const {
         view,
         onEscape
       } = this.props;
-
       // We need to pass down the ESCAPE keymap
       // because when we focus on the Toolbar, Prosemirror blur,
       // making all keyboard shortcuts not working
@@ -119,7 +125,11 @@ export class AltTextEditComponent extends React.Component {
     _defineProperty(this, "handleOnBlur", e => {
       // prevent other selection transaction gets triggered
       e.stopPropagation();
-      this.closeMediaAltTextMenu();
+      if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_8')) {
+        this.closeMediaAltTextMenuAndSetFocus();
+      } else {
+        this.closeMediaAltTextMenu(); // Why do we close the menu on blur? Is it a bug?
+      }
     });
     _defineProperty(this, "handleClearText", () => {
       this.handleOnChange('');
@@ -177,6 +187,7 @@ export class AltTextEditComponent extends React.Component {
       }, error);
     });
     const hasErrors = !!errorsList.length;
+    const onSubmit = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_8') ? this.closeMediaAltTextMenuAndSetFocus : this.closeMediaAltTextMenu;
     return jsx("div", {
       css: containerStyles
     }, jsx("section", {
@@ -199,7 +210,7 @@ export class AltTextEditComponent extends React.Component {
       onCancel: this.dispatchCancelEvent,
       onChange: this.handleOnChange,
       onBlur: this.handleOnBlur,
-      onSubmit: this.closeMediaAltTextMenu,
+      onSubmit: onSubmit,
       maxLength: MAX_ALT_TEXT_LENGTH,
       ariaRequired: true,
       ariaInvalid: hasErrors,

package/dist/es2019/pm-plugins/pixel-resizing/ui/index.js

@@ -25,9 +25,10 @@ export const PixelEntry = ({
   intl,
   pluginState,
   hoverDecoration,
-  isEditorFullWidthEnabled
+  isEditorFullWidthEnabled,
+  triggerButtonSelector
 }) => {
-  var _pluginInjectionApi$w, _pluginInjectionApi$m, _pluginInjectionApi$m2;
+  var _pluginInjectionApi$w, _pluginInjectionApi$m, _pluginInjectionApi$m2, _pluginInjectionApi$f, _pluginInjectionApi$f2;
   const {
     state,
     dispatch
@@ -66,6 +67,7 @@ export const PixelEntry = ({
   // get pos of media node
   mediaWidth || DEFAULT_IMAGE_WIDTH);
   const pixelWidth = hasPixelType ? mediaSingleWidth : pixelWidthFromElement;
+  const forceFocusSelector = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f === void 0 ? void 0 : (_pluginInjectionApi$f2 = _pluginInjectionApi$f.actions) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.forceFocusSelector;
   return jsx(PixelEntryComponent, {
     intl: intl,
     width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
@@ -91,25 +93,34 @@ export const PixelEntry = ({
       }
     },
     onMigrate: () => {
-      const tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, {
+      let tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, {
         ...selectedMediaSingleNode.node.attrs,
         width: pixelWidthFromElement,
         widthType: 'pixel'
       });
       tr.setMeta('scrollIntoView', false);
       tr.setSelection(NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
+      if (triggerButtonSelector) {
+        const newTr = forceFocusSelector && forceFocusSelector(triggerButtonSelector)(tr);
+        tr = newTr !== undefined ? newTr : tr;
+      }
       dispatch(tr);
     },
     onCloseAndSave: ({
       width,
       validation
-    }) => {
-      const tr = updateNodeWithTr(width, validation);
+    }, setFocus) => {
+      let tr = updateNodeWithTr(width, validation);
+      if (setFocus && triggerButtonSelector) {
+        const newTr = forceFocusSelector && tr && forceFocusSelector(triggerButtonSelector)(tr);
+        tr = newTr !== undefined ? newTr : tr;
+      }
       if (tr) {
         return closePixelEditorAndSave(() => tr)(state, dispatch);
       }
     },
-    isViewMode: pluginState.isResizing
+    isViewMode: pluginState.isResizing,
+    triggerButtonSelector: triggerButtonSelector
   });
 };
 export const FullWidthDisplay = ({