@atlaskit/editor-plugin-media 3.0.1 → 3.0.3

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

@@ -11,6 +11,7 @@ import { IconButton } from '@atlaskit/button/new';
 import { pixelEntryMessages as messages } from '@atlaskit/editor-common/media';
 import Form, { Field } from '@atlaskit/form';
 import CloseIcon from '@atlaskit/icon/core/close';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Inline, Box, Text, xcss } from '@atlaskit/primitives';
 import Textfield from '@atlaskit/textfield';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -84,7 +85,7 @@ export const PixelEntryComponent = ({
   };
 
   // Handle submit when user presses enter or click close button in PixelEntryComponentNext
-  const handleCloseAndSave = useCallback(data => {
+  const handleCloseAndSave = useCallback((data, setFocus) => {
     if (data.inputWidth === '' || data.inputHeight === '') {
       return;
     }
@@ -110,7 +111,7 @@ export const PixelEntryComponent = ({
       onCloseAndSave({
         width: widthToBeSubmitted,
         validation
-      });
+      }, setFocus);
     }
   }, [maxWidth, minWidth, onCloseAndSave, ratioWidth]);
 
@@ -274,10 +275,11 @@ export const PixelEntryComponentNext = ({
   }, [isViewMode, widthInputRef]);
   const handleKeyDown = useCallback(event => {
     if (event.key === 'Enter') {
+      const shouldSetFocus = true;
       handleCloseAndSave({
         inputWidth: computedWidth,
         inputHeight: computedHeight
-      });
+      }, shouldSetFocus);
     }
   }, [computedWidth, computedHeight, handleCloseAndSave]);
   return jsx(Box, {
@@ -344,6 +346,7 @@ export const PixelEntryComponentNext = ({
         inputWidth: computedWidth,
         inputHeight: computedHeight
       });
-    }
+    },
+    onKeyDown: fg('platform_editor_controls_patch_8') ? handleKeyDown : undefined
   }))));
 };

package/dist/es2019/ui/MediaLinkingToolbar.js

@@ -50,14 +50,14 @@ class LinkAddToolbar extends React.PureComponent {
     _defineProperty(this, "handleOnBack", ({
       url,
       inputMethod
-    }) => {
+    }, setFocus) => {
       const {
         onBack
       } = this.props;
       if (onBack) {
         onBack(url, {
           inputMethod
-        });
+        }, setFocus);
       }
     });
     _defineProperty(this, "handleCancel", () => {
@@ -68,12 +68,12 @@ class LinkAddToolbar extends React.PureComponent {
         onCancel();
       }
     });
-    _defineProperty(this, "handleUnlink", () => {
+    _defineProperty(this, "handleUnlink", setFocus => {
       const {
         onUnlink
       } = this.props;
       if (onUnlink) {
-        onUnlink();
+        onUnlink(setFocus);
       }
     });
     _defineProperty(this, "handleOnBlur", options => {
@@ -124,7 +124,15 @@ class LinkAddToolbar extends React.PureComponent {
           onClick: () => this.handleOnBack({
             url: value,
             inputMethod: currentInputMethod
-          })
+          }),
+          onKeyDown: event => {
+            if (event.key === 'Enter') {
+              this.handleOnBack({
+                url: value,
+                inputMethod: currentInputMethod
+              }, true);
+            }
+          }
         })), jsx(PanelTextInput, {
           inputId: "media-link-search-input",
           testId: "media-link-input",
@@ -156,7 +164,12 @@ class LinkAddToolbar extends React.PureComponent {
           icon: jsx(EditorUnlinkIcon, {
             label: formatUnlinkText
           }),
-          onClick: this.handleUnlink
+          onClick: () => this.handleUnlink(),
+          onKeyDown: event => {
+            if (event.key === 'Enter') {
+              this.handleUnlink(true);
+            }
+          }
         }))), !!errorsList.length && jsx("section", {
           css: validationWrapper
         }, errorsList), renderRecentList()))

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

@@ -5,6 +5,8 @@ import { MediaSharedClassNames as ClassNames } from '@atlaskit/editor-common/sty
 import { RECENT_SEARCH_WIDTH_IN_PX as CONTAINER_WIDTH_IN_PX } from '@atlaskit/editor-common/ui';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import TextIcon from '@atlaskit/icon/core/text';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { openMediaAltTextMenu } from '../../pm-plugins/alt-text/commands';
 import AltTextEdit from '../../pm-plugins/alt-text/ui/AltTextEdit';
 import { isImage } from '../../pm-plugins/utils/is-type';
@@ -45,7 +47,7 @@ const altTextEditComponent = options => {
       /** Focus should move to the 'Alt text' button when the toolbar closes
        * and not close the floating toolbar.
        */
-      const handleEsc = () => {
+      const setFocus = () => {
         var _options$forceFocusSe;
         const {
           state: {
@@ -53,7 +55,8 @@ const altTextEditComponent = options => {
           },
           dispatch
         } = view;
-        const newTr = options === null || options === void 0 ? void 0 : (_options$forceFocusSe = options.forceFocusSelector) === null || _options$forceFocusSe === void 0 ? void 0 : _options$forceFocusSe.call(options, `[data-testid="${testId}"]`)(tr);
+        const elementSelector = options !== null && options !== void 0 && options.triggerButtonSelector && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_8') ? options.triggerButtonSelector : `[data-testid="${testId}"]`;
+        const newTr = options === null || options === void 0 ? void 0 : (_options$forceFocusSe = options.forceFocusSelector) === null || _options$forceFocusSe === void 0 ? void 0 : _options$forceFocusSe.call(options, elementSelector)(tr);
         if (newTr) {
           dispatch(newTr);
         }
@@ -66,7 +69,8 @@ const altTextEditComponent = options => {
         mediaType: mediaNode.attrs.type,
         value: mediaNode.attrs.alt,
         altTextValidator: options && options.altTextValidator,
-        onEscape: handleEsc
+        onEscape: setFocus,
+        onEnter: setFocus
       });
     }
   };

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

@@ -8,7 +8,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { CommentWithDotIcon } from './assets/commentWithDotIcon';
 import { getSelectedMediaSingle } from './utils';
-export const commentButton = (intl, state, api) => {
+export const commentButton = (intl, state, api, onCommentButtonMount) => {
   var _getSelectedMediaSing, _api$annotation, _api$annotation$share, _api$connectivity, _api$connectivity$sha, _api$connectivity$sha2;
   const selectMediaNode = (_getSelectedMediaSing = getSelectedMediaSingle(state)) === null || _getSelectedMediaSing === void 0 ? void 0 : _getSelectedMediaSing.node.firstChild;
   let hasActiveComments = false;
@@ -46,6 +46,11 @@ export const commentButton = (intl, state, api) => {
       description: title
     }),
     supportsViewMode: true,
-    disabled: (api === null || api === void 0 ? void 0 : (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 ? void 0 : (_api$connectivity$sha = _api$connectivity.sharedState) === null || _api$connectivity$sha === void 0 ? void 0 : (_api$connectivity$sha2 = _api$connectivity$sha.currentState()) === null || _api$connectivity$sha2 === void 0 ? void 0 : _api$connectivity$sha2.mode) === 'offline'
+    disabled: (api === null || api === void 0 ? void 0 : (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 ? void 0 : (_api$connectivity$sha = _api$connectivity.sharedState) === null || _api$connectivity$sha === void 0 ? void 0 : (_api$connectivity$sha2 = _api$connectivity$sha.currentState()) === null || _api$connectivity$sha2 === void 0 ? void 0 : _api$connectivity$sha2.mode) === 'offline',
+    onMount: () => {
+      if (fg('confluence_frontend_preload_inline_comment_editor')) {
+        onCommentButtonMount && onCommentButtonMount();
+      }
+    }
   };
 };

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

@@ -266,7 +266,8 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
     allowMediaInlineImages,
     allowImagePreview,
     isViewOnly,
-    allowPixelResizing
+    allowPixelResizing,
+    onCommentButtonMount
   } = options;
   let toolbarButtons = [];
   const {
@@ -538,7 +539,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
     }
     if (!isEditorControlsEnabled) {
       if (allowCommentsOnMedia) {
-        toolbarButtons.push(commentButton(intl, state, pluginInjectionApi), {
+        toolbarButtons.push(commentButton(intl, state, pluginInjectionApi, onCommentButtonMount), {
           type: 'separator',
           supportsViewMode: true
         });
@@ -731,7 +732,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
     });
     if (allowAdvancedToolBarOptions && allowCommentsOnMedia) {
       updateToFullHeightSeparator(toolbarButtons);
-      toolbarButtons.push(commentButton(intl, state, pluginInjectionApi));
+      toolbarButtons.push(commentButton(intl, state, pluginInjectionApi, onCommentButtonMount));
     }
     return toolbarButtons;
   }
@@ -740,6 +741,7 @@ const getMediaTypeMessage = selectedNodeTypeSingle => {
   const mediaType = Object.keys(mediaTypeMessages).find(key => selectedNodeTypeSingle === null || selectedNodeTypeSingle === void 0 ? void 0 : selectedNodeTypeSingle.includes(key));
   return mediaType ? mediaTypeMessages[mediaType] : messages.file_unknown_is_selected;
 };
+export const overflowDropdwonBtnTriggerTestId = 'media-overflow-dropdown-trigger';
 export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) => {
   var _pluginInjectionApi$d3, _pluginInjectionApi$d4;
   const {
@@ -789,13 +791,18 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
       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
+  const overflowButtonSelector = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_8') ? `[data-testid="${overflowDropdwonBtnTriggerTestId}"]` : undefined;
   if (allowAltTextOnImages) {
     const mediaAltTextPluginState = getMediaAltTextPluginState(state);
     if (mediaAltTextPluginState.isAltTextEditorOpen) {
       var _pluginInjectionApi$f, _pluginInjectionApi$f2;
       return getAltTextToolbar(baseToolbar, {
         altTextValidator,
-        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
+        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,
+        triggerButtonSelector: overflowButtonSelector
       });
     }
   }
@@ -811,7 +818,8 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
         pluginInjectionApi,
         pluginState: mediaPluginState,
         hoverDecoration,
-        isEditorFullWidthEnabled: options.fullWidthEnabled
+        isEditorFullWidthEnabled: options.fullWidthEnabled,
+        triggerButtonSelector: overflowButtonSelector
       });
     }
   }
@@ -862,6 +870,7 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
     items.push({
       type: 'overflow-dropdown',
       id: 'media',
+      testId: overflowDropdwonBtnTriggerTestId,
       options: [...customOptions, {
         title: intl === null || intl === void 0 ? void 0 : intl.formatMessage(commonMessages.copyToClipboard),
         onClick: () => {

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

@@ -6,11 +6,13 @@ import { RECENT_SEARCH_HEIGHT_IN_PX, RECENT_SEARCH_WIDTH_IN_PX } from '@atlaskit
 import LinkIcon from '@atlaskit/icon/core/link';
 import LinkExternalIcon from '@atlaskit/icon/core/link-external';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { hideLinkingToolbar, setUrlToMedia, showLinkingToolbar, unlink } from '../../pm-plugins/commands/linking';
 import { getMediaLinkingState } from '../../pm-plugins/linking';
 import { currentMediaInlineNode, currentMediaNode } from '../../pm-plugins/utils/current-media-node';
 import MediaLinkingToolbar from '../../ui/MediaLinkingToolbar';
 const FORCE_FOCUS_SELECTOR = '[data-testid="add-link-button"],[data-testid="edit-link-button"]';
+const FORCE_FOCUS_SELECTOR_EDITOR_CONTROLS = '[data-testid="media-overflow-dropdown-trigger"]';
 export function shouldShowMediaLinkToolbar(editorState) {
   const mediaLinkingState = getMediaLinkingState(editorState);
   if (!mediaLinkingState || mediaLinkingState.mediaPos === null) {
@@ -57,25 +59,40 @@ export const getLinkingToolbar = (toolbarBaseConfig, mediaLinkingState, state, i
             if (!view || !providerFactory) {
               return null;
             }
+            const setFocusOnFloatingToolbar = setFocus => {
+              if (setFocus && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_8')) {
+                var _pluginInjectionApi$f, _pluginInjectionApi$f2;
+                const {
+                  state: {
+                    tr
+                  },
+                  dispatch
+                } = view;
+                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(FORCE_FOCUS_SELECTOR_EDITOR_CONTROLS)(tr);
+                dispatch(tr);
+              }
+            };
             return /*#__PURE__*/React.createElement(MediaLinkingToolbar, {
               key: idx,
               displayUrl: link,
               providerFactory: providerFactory,
               intl: intl,
               editing: editing,
-              onUnlink: () => {
+              onUnlink: setFocus => {
                 var _pluginInjectionApi$a;
-                return unlink(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(view.state, view.dispatch, view);
+                unlink(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(view.state, view.dispatch, view);
+                setFocusOnFloatingToolbar(setFocus);
               },
-              onBack: (href, meta) => {
+              onBack: (href, meta, setFocus) => {
                 if (href.trim() && meta.inputMethod) {
                   var _pluginInjectionApi$a2;
                   setUrlToMedia(href, meta.inputMethod, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions)(view.state, view.dispatch, view);
                 }
                 hideLinkingToolbar(view.state, view.dispatch, view);
+                setFocusOnFloatingToolbar(setFocus);
               },
               onCancel: () => {
-                var _pluginInjectionApi$f, _pluginInjectionApi$f2;
+                var _pluginInjectionApi$f3, _pluginInjectionApi$f4;
                 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.
@@ -86,13 +103,15 @@ export const getLinkingToolbar = (toolbarBaseConfig, mediaLinkingState, state, i
                   },
                   dispatch
                 } = view;
-                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(FORCE_FOCUS_SELECTOR)(tr);
+                const selector = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_8') ? FORCE_FOCUS_SELECTOR_EDITOR_CONTROLS : FORCE_FOCUS_SELECTOR;
+                pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f3 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f3 === void 0 ? void 0 : (_pluginInjectionApi$f4 = _pluginInjectionApi$f3.actions) === null || _pluginInjectionApi$f4 === void 0 ? void 0 : _pluginInjectionApi$f4.forceFocusSelector(selector)(tr);
                 dispatch(tr);
               },
               onSubmit: (href, meta) => {
                 var _pluginInjectionApi$a3;
                 setUrlToMedia(href, meta.inputMethod, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions)(view.state, view.dispatch, view);
                 hideLinkingToolbar(view.state, view.dispatch, view);
+                setFocusOnFloatingToolbar(true);
               },
               onBlur: () => {
                 hideLinkingToolbar(view.state, view.dispatch, view);

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

@@ -13,7 +13,8 @@ export const getPixelResizingToolbar = (toolbarBaseConfig, {
   intl,
   pluginState,
   hoverDecoration,
-  isEditorFullWidthEnabled
+  isEditorFullWidthEnabled,
+  triggerButtonSelector
 }) => ({
   ...toolbarBaseConfig,
   width: PIXEL_RESIZING_TOOLBAR_WIDTH,
@@ -36,7 +37,8 @@ export const getPixelResizingToolbar = (toolbarBaseConfig, {
         pluginInjectionApi: pluginInjectionApi,
         pluginState: pluginState,
         hoverDecoration: hoverDecoration,
-        isEditorFullWidthEnabled: isEditorFullWidthEnabled
+        isEditorFullWidthEnabled: isEditorFullWidthEnabled,
+        triggerButtonSelector: triggerButtonSelector
       });
     }
   }]

package/dist/esm/mediaPlugin.js

@@ -356,7 +356,8 @@ export var 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/esm/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -24,7 +24,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 var MAX_ALT_TEXT_LENGTH = 510; // double tweet length
 
@@ -90,11 +92,15 @@ export var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
         closeMediaAltTextMenu(view.state, view.dispatch);
       }
     });
+    _defineProperty(_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);
+    });
     _defineProperty(_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
@@ -127,7 +133,11 @@ export var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this, "handleOnBlur", function (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", function () {
       _this.handleOnChange('');
@@ -185,6 +195,7 @@ export var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
         }, error);
       });
       var hasErrors = !!errorsList.length;
+      var onSubmit = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_8') ? this.closeMediaAltTextMenuAndSetFocus : this.closeMediaAltTextMenu;
       return jsx("div", {
         css: containerStyles
       }, jsx("section", {
@@ -207,7 +218,7 @@ export var AltTextEditComponent = /*#__PURE__*/function (_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,
@@ -237,10 +248,10 @@ export var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     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/esm/pm-plugins/pixel-resizing/ui/index.js

@@ -22,14 +22,15 @@ import { closePixelEditorAndSave } from '../commands';
 import { PixelEntryComponent } from './pixel-entry';
 import { pixelSizingFullWidthLabelStyles } from './styles';
 export var 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;
@@ -64,6 +65,7 @@ export var PixelEntry = function PixelEntry(_ref) {
   // get pos of media node
   mediaWidth || 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 jsx(PixelEntryComponent, {
     intl: intl,
     width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
@@ -94,19 +96,28 @@ export var PixelEntry = function PixelEntry(_ref) {
       }));
       tr.setMeta('scrollIntoView', false);
       tr.setSelection(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 closePixelEditorAndSave(function () {
           return tr;
         })(state, dispatch);
       }
     },
-    isViewMode: pluginState.isResizing
+    isViewMode: pluginState.isResizing,
+    triggerButtonSelector: triggerButtonSelector
   });
 };
 export var FullWidthDisplay = function FullWidthDisplay(_ref4) {

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

@@ -12,6 +12,7 @@ import { IconButton } from '@atlaskit/button/new';
 import { pixelEntryMessages as messages } from '@atlaskit/editor-common/media';
 import Form, { Field } from '@atlaskit/form';
 import CloseIcon from '@atlaskit/icon/core/close';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Inline, Box, Text, xcss } from '@atlaskit/primitives';
 import Textfield from '@atlaskit/textfield';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -88,7 +89,7 @@ export var PixelEntryComponent = function PixelEntryComponent(_ref) {
   };
 
   // Handle submit when user presses enter or click close button in PixelEntryComponentNext
-  var handleCloseAndSave = useCallback(function (data) {
+  var handleCloseAndSave = useCallback(function (data, setFocus) {
     if (data.inputWidth === '' || data.inputHeight === '') {
       return;
     }
@@ -114,7 +115,7 @@ export var PixelEntryComponent = function PixelEntryComponent(_ref) {
       onCloseAndSave({
         width: widthToBeSubmitted,
         validation: validation
-      });
+      }, setFocus);
     }
   }, [maxWidth, minWidth, onCloseAndSave, ratioWidth]);
 
@@ -280,10 +281,11 @@ export var PixelEntryComponentNext = function PixelEntryComponentNext(_ref5) {
   }, [isViewMode, widthInputRef]);
   var handleKeyDown = useCallback(function (event) {
     if (event.key === 'Enter') {
+      var shouldSetFocus = true;
       handleCloseAndSave({
         inputWidth: computedWidth,
         inputHeight: computedHeight
-      });
+      }, shouldSetFocus);
     }
   }, [computedWidth, computedHeight, handleCloseAndSave]);
   return jsx(Box, {
@@ -352,6 +354,7 @@ export var PixelEntryComponentNext = function PixelEntryComponentNext(_ref5) {
         inputWidth: computedWidth,
         inputHeight: computedHeight
       });
-    }
+    },
+    onKeyDown: fg('platform_editor_controls_patch_8') ? handleKeyDown : undefined
   }))));
 };

package/dist/esm/ui/MediaLinkingToolbar.js

@@ -58,14 +58,14 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
         inputMethod: inputMethod
       });
     });
-    _defineProperty(_this, "handleOnBack", function (_ref2) {
+    _defineProperty(_this, "handleOnBack", function (_ref2, setFocus) {
       var url = _ref2.url,
         inputMethod = _ref2.inputMethod;
       var onBack = _this.props.onBack;
       if (onBack) {
         onBack(url, {
           inputMethod: inputMethod
-        });
+        }, setFocus);
       }
     });
     _defineProperty(_this, "handleCancel", function () {
@@ -74,10 +74,10 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
         onCancel();
       }
     });
-    _defineProperty(_this, "handleUnlink", function () {
+    _defineProperty(_this, "handleUnlink", function (setFocus) {
       var onUnlink = _this.props.onUnlink;
       if (onUnlink) {
-        onUnlink();
+        onUnlink(setFocus);
       }
     });
     _defineProperty(_this, "handleOnBlur", function (options) {
@@ -127,6 +127,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);
+            }
           }
         })), jsx(PanelTextInput, {
           inputId: "media-link-search-input",
@@ -159,7 +167,14 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
           icon: jsx(EditorUnlinkIcon, {
             label: formatUnlinkText
           }),
-          onClick: _this.handleUnlink
+          onClick: function onClick() {
+            return _this.handleUnlink();
+          },
+          onKeyDown: function onKeyDown(event) {
+            if (event.key === 'Enter') {
+              _this.handleUnlink(true);
+            }
+          }
         }))), !!errorsList.length && jsx("section", {
           css: validationWrapper
         }, errorsList), renderRecentList()))

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

@@ -8,6 +8,8 @@ import { MediaSharedClassNames as ClassNames } from '@atlaskit/editor-common/sty
 import { RECENT_SEARCH_WIDTH_IN_PX as CONTAINER_WIDTH_IN_PX } from '@atlaskit/editor-common/ui';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import TextIcon from '@atlaskit/icon/core/text';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { openMediaAltTextMenu } from '../../pm-plugins/alt-text/commands';
 import AltTextEdit from '../../pm-plugins/alt-text/ui/AltTextEdit';
 import { isImage } from '../../pm-plugins/utils/is-type';
@@ -48,11 +50,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 && editorExperiment('platform_editor_controls', 'variant1') && 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);
         }
@@ -65,7 +68,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/esm/ui/toolbar/comments.js

@@ -8,7 +8,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { CommentWithDotIcon } from './assets/commentWithDotIcon';
 import { getSelectedMediaSingle } from './utils';
-export var commentButton = function commentButton(intl, state, api) {
+export var commentButton = function commentButton(intl, state, api, onCommentButtonMount) {
   var _getSelectedMediaSing, _api$annotation, _api$connectivity;
   var selectMediaNode = (_getSelectedMediaSing = getSelectedMediaSingle(state)) === null || _getSelectedMediaSing === void 0 ? void 0 : _getSelectedMediaSing.node.firstChild;
   var hasActiveComments = false;
@@ -47,6 +47,11 @@ export var commentButton = function commentButton(intl, state, api) {
       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 (fg('confluence_frontend_preload_inline_comment_editor')) {
+        onCommentButtonMount && onCommentButtonMount();
+      }
+    }
   };
 };