@atlaskit/editor-plugin-media 8.2.1 → 8.3.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-media
 
+## 8.3.1
+
+### Patch Changes
+
+- [`507be0327d12c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/507be0327d12c) -
+  [ux] ED-29558 [Jira] Media element toolbar 'resize' doesn't work
+- Updated dependencies
+
+## 8.3.0
+
+### Minor Changes
+
+- [`e5f402044b1c6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e5f402044b1c6) -
+  Add media render error analytics
+
+### Patch Changes
+
+- [`2352f7c910f27`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2352f7c910f27) -
+  upgrade use of browser util
+- Updated dependencies
+
 ## 8.2.1
 
 ### Patch Changes

package/dist/cjs/mediaPlugin.js

@@ -7,12 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mediaPlugin = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _mediaCommon = require("@atlaskit/media-common");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _lazyMedia = require("./nodeviews/lazy-media");
 var _lazyMediaGroup = require("./nodeviews/lazy-media-group");
 var _lazyMediaInline = require("./nodeviews/lazy-media-inline");
@@ -108,6 +109,7 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
     options = _ref3$config === void 0 ? {} : _ref3$config,
     api = _ref3.api;
   var previousMediaProvider;
+  var mediaErrorLocalIds = new Set();
   return {
     name: 'media',
     getSharedState: function getSharedState(editorState) {
@@ -117,9 +119,27 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
       return _pluginKey.stateKey.getState(editorState) || null;
     },
     actions: {
-      insertMediaAsMediaSingle: function insertMediaAsMediaSingle(view, node, inputMethod, insertMediaVia) {
+      handleMediaNodeRenderError: function handleMediaNodeRenderError(node, reason) {
         var _api$analytics;
-        return (0, _mediaSingle2.insertMediaAsMediaSingle)(view, node, inputMethod, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, insertMediaVia, options === null || options === void 0 ? void 0 : options.allowPixelResizing);
+        // Only fire the errored event once per media node
+        if (mediaErrorLocalIds.has(node.attrs.localId)) {
+          return;
+        }
+        mediaErrorLocalIds.add(node.attrs.localId);
+        api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent({
+          action: _analytics.ACTION.ERRORED,
+          actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
+          actionSubjectId: _analytics.ACTION_SUBJECT_ID.MEDIA,
+          eventType: _analytics.EVENT_TYPE.UI,
+          attributes: {
+            reason: reason,
+            external: node.attrs.__external
+          }
+        });
+      },
+      insertMediaAsMediaSingle: function insertMediaAsMediaSingle(view, node, inputMethod, insertMediaVia) {
+        var _api$analytics2;
+        return (0, _mediaSingle2.insertMediaAsMediaSingle)(view, node, inputMethod, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, insertMediaVia, options === null || options === void 0 ? void 0 : options.allowPixelResizing);
       },
       setProvider: function setProvider(provider) {
         var _api$core$actions$exe;
@@ -214,9 +234,9 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
       }, {
         name: 'mediaKeymap',
         plugin: function plugin(_ref7) {
-          var _api$analytics2, _api$selection;
+          var _api$analytics3, _api$selection;
           var getIntl = _ref7.getIntl;
-          return (0, _keymap2.default)(options, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : _api$selection.actions, api === null || api === void 0 ? void 0 : api.width, getIntl);
+          return (0, _keymap2.default)(options, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : _api$selection.actions, api === null || api === void 0 ? void 0 : api.width, getIntl);
         }
       }];
       if (options && options.allowMediaSingle) {
@@ -236,9 +256,9 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
         pmPlugins.push({
           name: 'mediaAltTextKeymap',
           plugin: function plugin(_ref9) {
-            var _api$analytics3;
+            var _api$analytics4;
             var schema = _ref9.schema;
-            return (0, _keymap.default)(schema, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions);
+            return (0, _keymap.default)(schema, api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions);
           }
         });
       }
@@ -258,7 +278,7 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
           }
         });
       }
-      if (options && options.allowAdvancedToolBarOptions && options.allowResizing && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && options.allowPixelResizing) {
+      if (options && options.allowAdvancedToolBarOptions && options.allowResizing && (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar)) && options.allowPixelResizing) {
         pmPlugins.push({
           name: 'mediaPixelResizing',
           plugin: _pixelResizing.createPlugin

package/dist/cjs/nodeviews/mediaNodeView/index.js

@@ -109,7 +109,9 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
           height: height
         };
         var isSelectedAndInteracted = _this.nodeInsideSelection() && interactionState !== 'hasNotHadInteraction';
+        var pluginInjectionApi = _this.reactComponentProps.pluginInjectionApi;
         return /*#__PURE__*/_react.default.createElement(_media.default, {
+          api: pluginInjectionApi,
           view: _this.view,
           node: _this.node,
           getPos: getPos,
@@ -121,7 +123,8 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
           contextIdentifierProvider: contextIdentifierProvider,
           mediaOptions: mediaOptions,
           onExternalImageLoaded: _this.onExternalImageLoaded,
-          isViewOnly: ((_this$reactComponentP = _this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP === void 0 || (_this$reactComponentP = _this$reactComponentP.editorViewMode) === null || _this$reactComponentP === void 0 || (_this$reactComponentP = _this$reactComponentP.sharedState.currentState()) === null || _this$reactComponentP === void 0 ? void 0 : _this$reactComponentP.mode) === 'view'
+          isViewOnly: ((_this$reactComponentP = _this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP === void 0 || (_this$reactComponentP = _this$reactComponentP.editorViewMode) === null || _this$reactComponentP === void 0 || (_this$reactComponentP = _this$reactComponentP.sharedState.currentState()) === null || _this$reactComponentP === void 0 ? void 0 : _this$reactComponentP.mode) === 'view',
+          pluginInjectionApi: _this.reactComponentProps.pluginInjectionApi
         });
       };
     });

package/dist/cjs/nodeviews/mediaNodeView/media.js

@@ -18,10 +18,12 @@ var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
 var _analyticsNamespacedContext = require("@atlaskit/analytics-namespaced-context");
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
 var _utils = require("@atlaskit/editor-common/utils");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _mediaCard = require("@atlaskit/media-card");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _pluginKey = require("../../pm-plugins/plugin-key");
 var _styles = require("../styles");
@@ -64,13 +66,14 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
       }, _callee);
     })));
     (0, _defineProperty2.default)(_this, "selectMediaSingleFromCard", function (_ref2) {
+      var _this$props$pluginInj;
       var event = _ref2.event;
       _this.selectMediaSingle(event);
 
       // In edit mode (node content wrapper has contenteditable set to true), link redirection is disabled by default
       // We need to call "stopPropagation" here in order to prevent in editor view mode, the browser from navigating to
       // another URL if the media node is wrapped in a link mark.
-      if (_this.props.isViewOnly && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+      if (_this.props.isViewOnly && (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean((_this$props$pluginInj = _this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 ? void 0 : _this$props$pluginInj.toolbar))) {
         event.preventDefault();
       }
     });
@@ -243,7 +246,8 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
         originalDimensions = _this$props.originalDimensions,
         isLoading = _this$props.isLoading,
         maxDimensions = _this$props.maxDimensions,
-        mediaOptions = _this$props.mediaOptions;
+        mediaOptions = _this$props.mediaOptions,
+        api = _this$props.api;
       var borderMark = node.marks.find(function (m) {
         return m.type.name === 'border';
       });
@@ -324,7 +328,10 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
         ssr: ssr,
         mediaSettings: {
           canUpdateVideoCaptions: (0, _platformFeatureFlags.fg)('platform_media_video_captions') ? !!viewAndUploadMediaClientConfig : false
-        }
+        },
+        onError: (0, _expValEquals.expValEquals)('platform_editor_media_error_analytics', 'isEnabled', true) ? function (reason) {
+          return api === null || api === void 0 ? void 0 : api.media.actions.handleMediaNodeRenderError(node, reason);
+        } : undefined
       })));
     }
   }]);

package/dist/cjs/nodeviews/mediaSingleNext.js

@@ -12,15 +12,16 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
+var _browser = require("@atlaskit/editor-common/browser");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _media = require("@atlaskit/editor-common/media");
 var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _ui = require("@atlaskit/editor-common/ui");
-var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
-var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _mediaClient = require("@atlaskit/media-client");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _captions = require("../pm-plugins/commands/captions");
 var _mediaCommon = require("../pm-plugins/utils/media-common");
 var _CaptionPlaceholder = require("../ui/CaptionPlaceholder");
@@ -393,7 +394,7 @@ var MediaSingleNodeNext = exports.MediaSingleNodeNext = function MediaSingleNode
     // If resizing not allowed in tables, check parents for tables
     var $pos = view.state.doc.resolve(pos);
     var table = view.state.schema.nodes.table;
-    var disabledNode = !!(0, _utils2.findParentNodeOfTypeClosestToPos)($pos, [table]);
+    var disabledNode = !!(0, _utils.findParentNodeOfTypeClosestToPos)($pos, [table]);
     return Boolean(result && !disabledNode);
   }, [mediaOptions, pos, view, editorDisabled, editorViewMode]);
   var shouldShowPlaceholder = _react.default.useMemo(function () {
@@ -404,7 +405,7 @@ var MediaSingleNodeNext = exports.MediaSingleNodeNext = function MediaSingleNode
     if (typeof pos !== 'number') {
       return false;
     }
-    return (0, _utils2.findParentNodeOfTypeClosestToPos)(view.state.doc.resolve(pos), [view.state.schema.nodes.table]);
+    return (0, _utils.findParentNodeOfTypeClosestToPos)(view.state.doc.resolve(pos), [view.state.schema.nodes.table]);
   }, [pos, view]);
   var currentMediaElement = _react.default.useCallback(function () {
     if (typeof pos !== 'number') {
@@ -433,9 +434,10 @@ var MediaSingleNodeNext = exports.MediaSingleNodeNext = function MediaSingleNode
   var captionPlaceHolderRef = /*#__PURE__*/_react.default.createRef();
   var onMediaSingleClicked = _react.default.useCallback(function (event) {
     var _captionPlaceHolderRe;
+    var browser = (0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) ? (0, _browser.getBrowserInfo)() : _browser.browser;
     // Workaround for iOS 16 Caption selection issue
     // @see https://product-fabric.atlassian.net/browse/MEX-2012
-    if (!_utils.browser.ios) {
+    if (!browser.ios) {
       return;
     }
     if (mediaSingleWrapperRef.current !== event.target) {

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

@@ -24,7 +24,6 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _chevronLeftChevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-left--chevron-left-large"));
 var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/cross-circle"));
 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; })(); } /**
@@ -134,9 +133,10 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
       });
     });
     (0, _defineProperty2.default)(_this, "handleOnBlur", function (e) {
+      var _this$props$areAnyNew;
       // prevent other selection transaction gets triggered
       e.stopPropagation();
-      if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+      if ((_this$props$areAnyNew = _this.props.areAnyNewToolbarFlagsEnabled) !== null && _this$props$areAnyNew !== void 0 ? _this$props$areAnyNew : (0, _toolbarFlagCheck.areToolbarFlagsEnabled)()) {
         _this.closeMediaAltTextMenuAndSetFocus();
       } else {
         _this.closeMediaAltTextMenu();
@@ -182,7 +182,7 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
   }, {
     key: "render",
     value: function render() {
-      var _this$props$areAnyNew, _this$props$areAnyNew2;
+      var _this$props$areAnyNew2, _this$props$areAnyNew3, _this$props$areAnyNew4;
       var formatMessage = this.props.intl.formatMessage;
       var showClearTextButton = this.state.showClearTextButton;
       var backButtonMessage = formatMessage(_media.altTextMessages.back);
@@ -199,7 +199,7 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
         }, error);
       });
       var hasErrors = !!errorsList.length;
-      var onSubmit = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? this.closeMediaAltTextMenuAndSetFocus : this.closeMediaAltTextMenu;
+      var onSubmit = ((_this$props$areAnyNew2 = this.props.areAnyNewToolbarFlagsEnabled) !== null && _this$props$areAnyNew2 !== void 0 ? _this$props$areAnyNew2 : (0, _toolbarFlagCheck.areToolbarFlagsEnabled)()) ? this.closeMediaAltTextMenuAndSetFocus : this.closeMediaAltTextMenu;
       return (0, _react2.jsx)("div", {
         css: containerStyles
       }, (0, _react2.jsx)("section", {
@@ -214,7 +214,7 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
         }),
         tooltipContent: backButtonMessageComponent,
         onClick: this.closeMediaAltTextMenu,
-        areAnyNewToolbarFlagsEnabled: (_this$props$areAnyNew = this.props.areAnyNewToolbarFlagsEnabled) !== null && _this$props$areAnyNew !== void 0 ? _this$props$areAnyNew : (0, _toolbarFlagCheck.areToolbarFlagsEnabled)()
+        areAnyNewToolbarFlagsEnabled: (_this$props$areAnyNew3 = this.props.areAnyNewToolbarFlagsEnabled) !== null && _this$props$areAnyNew3 !== void 0 ? _this$props$areAnyNew3 : (0, _toolbarFlagCheck.areToolbarFlagsEnabled)()
       })), (0, _react2.jsx)(_ui.PanelTextInput, {
         testId: "alt-text-input",
         ariaLabel: formatMessage(_media.altTextMessages.placeholder),
@@ -241,7 +241,7 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
         })),
         tooltipContent: formatMessage(_media.altTextMessages.clear),
         onClick: this.handleClearText,
-        areAnyNewToolbarFlagsEnabled: (_this$props$areAnyNew2 = this.props.areAnyNewToolbarFlagsEnabled) !== null && _this$props$areAnyNew2 !== void 0 ? _this$props$areAnyNew2 : (0, _toolbarFlagCheck.areToolbarFlagsEnabled)()
+        areAnyNewToolbarFlagsEnabled: (_this$props$areAnyNew4 = this.props.areAnyNewToolbarFlagsEnabled) !== null && _this$props$areAnyNew4 !== void 0 ? _this$props$areAnyNew4 : (0, _toolbarFlagCheck.areToolbarFlagsEnabled)()
       }))), hasErrors && (0, _react2.jsx)("section", {
         id: "errors-list",
         ref: this.errorsListRef,

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

@@ -10,6 +10,7 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _media = require("@atlaskit/editor-common/media");
 var _mediaSingle = require("@atlaskit/editor-common/media-single");
+var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -70,6 +71,7 @@ var PixelEntry = exports.PixelEntry = function PixelEntry(_ref) {
   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;
+  var areAnyNewToolbarFlagsEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar));
   return (0, _react2.jsx)(_pixelEntry.PixelEntryComponent, {
     intl: intl,
     width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
@@ -121,7 +123,8 @@ var PixelEntry = exports.PixelEntry = function PixelEntry(_ref) {
       }
     },
     isViewMode: pluginState.isResizing,
-    triggerButtonSelector: triggerButtonSelector
+    triggerButtonSelector: triggerButtonSelector,
+    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
   });
 };
 var FullWidthDisplay = exports.FullWidthDisplay = function FullWidthDisplay(_ref4) {

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

@@ -17,7 +17,6 @@ var _form = _interopRequireWildcard(require("@atlaskit/form"));
 var _cross = _interopRequireDefault(require("@atlaskit/icon/core/cross"));
 var _primitives = require("@atlaskit/primitives");
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _constants = require("./constants");
 var _styles = require("./styles");
@@ -49,7 +48,8 @@ var PixelEntryComponent = exports.PixelEntryComponent = function PixelEntryCompo
     showMigration = _ref.showMigration,
     onMigrate = _ref.onMigrate,
     onCloseAndSave = _ref.onCloseAndSave,
-    isViewMode = _ref.isViewMode;
+    isViewMode = _ref.isViewMode,
+    areAnyNewToolbarFlagsEnabled = _ref.areAnyNewToolbarFlagsEnabled;
   var ratioWidth = (0, _react.useMemo)(function () {
     return mediaHeight / mediaWidth;
   }, [mediaHeight, mediaWidth]);
@@ -170,7 +170,7 @@ var PixelEntryComponent = exports.PixelEntryComponent = function PixelEntryCompo
       testId: _constants.PIXELENTRY_MIGRATION_BUTTON_TESTID
     }, formatMessage(_media.pixelEntryMessages.migrationButtonText)));
   }
-  if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+  if (areAnyNewToolbarFlagsEnabled) {
     return (0, _react2.jsx)(PixelEntryComponentNext, {
       maxWidth: maxWidth,
       formatMessage: formatMessage,

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

@@ -13,7 +13,6 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _imageAltText = _interopRequireDefault(require("@atlaskit/icon-lab/core/image-alt-text"));
-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");
@@ -60,7 +59,7 @@ var altTextEditComponent = function altTextEditComponent(options) {
         var _options$forceFocusSe;
         var tr = view.state.tr,
           dispatch = view.dispatch;
-        var elementSelector = options !== null && options !== void 0 && options.triggerButtonSelector && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? options.triggerButtonSelector : "[data-testid=\"".concat(testId, "\"]");
+        var elementSelector = options !== null && options !== void 0 && options.triggerButtonSelector && options !== null && options !== void 0 && options.areAnyNewToolbarFlagsEnabled ? 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);

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

@@ -31,7 +31,6 @@ var _mediaFilmstrip = require("@atlaskit/media-filmstrip");
 var _mediaUi = require("@atlaskit/media-ui");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _styles = require("../../nodeviews/styles");
 var _altText = require("../../pm-plugins/alt-text");
 var _linking = require("../../pm-plugins/commands/linking");
@@ -756,7 +755,7 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
 
   // 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') ? "[data-testid=\"".concat(overflowDropdwonBtnTriggerTestId, "\"]") : undefined;
+  var overflowButtonSelector = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar)) ? "[data-testid=\"".concat(overflowDropdwonBtnTriggerTestId, "\"]") : undefined;
   if (allowAltTextOnImages) {
     var mediaAltTextPluginState = (0, _altText.getPluginState)(state);
     if (mediaAltTextPluginState.isAltTextEditorOpen) {
@@ -771,7 +770,7 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
   }
   var selection = state.selection;
   var isWithinTable = (0, _utils.hasParentNodeOfType)([state.schema.nodes.table])(selection);
-  if (allowAdvancedToolBarOptions && allowResizing && (!isWithinTable || allowResizingInTables === true) && allowPixelResizing && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+  if (allowAdvancedToolBarOptions && allowResizing && (!isWithinTable || allowResizingInTables === true) && allowPixelResizing && (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar))) {
     var mediaPixelResizingPluginState = (0, _pixelResizing.getPluginState)(state);
     if (mediaPixelResizingPluginState !== null && mediaPixelResizingPluginState !== void 0 && mediaPixelResizingPluginState.isPixelEditorOpen) {
       return (0, _pixelResizing2.getPixelResizingToolbar)(baseToolbar, {

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

@@ -15,7 +15,6 @@ var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
 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 _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");
@@ -63,7 +62,7 @@ var getLinkingToolbar = exports.getLinkingToolbar = function getLinkingToolbar(t
               return null;
             }
             var setFocusOnFloatingToolbar = function setFocusOnFloatingToolbar(setFocus) {
-              if (setFocus && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+              if (setFocus && (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar))) {
                 var _pluginInjectionApi$f;
                 var tr = view.state.tr,
                   dispatch = view.dispatch;
@@ -98,7 +97,7 @@ var getLinkingToolbar = exports.getLinkingToolbar = function getLinkingToolbar(t
                  */
                 var tr = view.state.tr,
                   dispatch = view.dispatch;
-                var selector = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? FORCE_FOCUS_SELECTOR_EDITOR_CONTROLS : FORCE_FOCUS_SELECTOR;
+                var selector = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar)) ? 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);
               },

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

@@ -20,7 +20,6 @@ var _maximize = _interopRequireDefault(require("@atlaskit/icon/core/maximize"));
 var _download = _interopRequireDefault(require("@atlaskit/icon/core/migration/download"));
 var _smartLinkCard = _interopRequireDefault(require("@atlaskit/icon/core/smart-link-card"));
 var _mediaUi = require("@atlaskit/media-ui");
-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");
@@ -189,7 +188,7 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
   var mediaSingleTitle = intl.formatMessage(_messages.mediaAndEmbedToolbarMessages.changeToMediaSingle);
   var widthPluginState = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.currentState();
   var inlineImageItems = [];
-  var isEditorControlsEnabled = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1');
+  var isEditorControlsEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar));
   var isViewOnly = options.isViewOnly,
     allowAltTextOnImages = options.allowAltTextOnImages,
     allowLinking = options.allowLinking,

package/dist/es2019/mediaPlugin.js

@@ -1,10 +1,11 @@
 import React, { useMemo } from 'react';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
 import { NodeSelection, PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { lazyMediaView } from './nodeviews/lazy-media';
 import { lazyMediaGroupView } from './nodeviews/lazy-media-group';
 import { lazyMediaInlineView } from './nodeviews/lazy-media-inline';
@@ -103,6 +104,7 @@ export const mediaPlugin = ({
   api
 }) => {
   let previousMediaProvider;
+  const mediaErrorLocalIds = new Set();
   return {
     name: 'media',
     getSharedState(editorState) {
@@ -112,9 +114,27 @@ export const mediaPlugin = ({
       return stateKey.getState(editorState) || null;
     },
     actions: {
-      insertMediaAsMediaSingle: (view, node, inputMethod, insertMediaVia) => {
+      handleMediaNodeRenderError: (node, reason) => {
         var _api$analytics;
-        return insertMediaAsMediaSingle(view, node, inputMethod, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, insertMediaVia, options === null || options === void 0 ? void 0 : options.allowPixelResizing);
+        // Only fire the errored event once per media node
+        if (mediaErrorLocalIds.has(node.attrs.localId)) {
+          return;
+        }
+        mediaErrorLocalIds.add(node.attrs.localId);
+        api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.fireAnalyticsEvent({
+          action: ACTION.ERRORED,
+          actionSubject: ACTION_SUBJECT.EDITOR,
+          actionSubjectId: ACTION_SUBJECT_ID.MEDIA,
+          eventType: EVENT_TYPE.UI,
+          attributes: {
+            reason,
+            external: node.attrs.__external
+          }
+        });
+      },
+      insertMediaAsMediaSingle: (view, node, inputMethod, insertMediaVia) => {
+        var _api$analytics2;
+        return insertMediaAsMediaSingle(view, node, inputMethod, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, insertMediaVia, options === null || options === void 0 ? void 0 : options.allowPixelResizing);
       },
       setProvider: provider => {
         var _api$core$actions$exe;
@@ -209,8 +229,8 @@ export const mediaPlugin = ({
         plugin: ({
           getIntl
         }) => {
-          var _api$analytics2, _api$selection;
-          return keymapPlugin(options, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api === null || api === void 0 ? void 0 : (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : _api$selection.actions, api === null || api === void 0 ? void 0 : api.width, getIntl);
+          var _api$analytics3, _api$selection;
+          return keymapPlugin(options, api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, api === null || api === void 0 ? void 0 : (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : _api$selection.actions, api === null || api === void 0 ? void 0 : api.width, getIntl);
         }
       }];
       if (options && options.allowMediaSingle) {
@@ -231,8 +251,8 @@ export const mediaPlugin = ({
           plugin: ({
             schema
           }) => {
-            var _api$analytics3;
-            return keymapMediaAltTextPlugin(schema, api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions);
+            var _api$analytics4;
+            return keymapMediaAltTextPlugin(schema, api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions);
           }
         });
       }
@@ -250,7 +270,7 @@ export const mediaPlugin = ({
           }) => keymapLinkingPlugin(schema)
         });
       }
-      if (options && options.allowAdvancedToolBarOptions && options.allowResizing && editorExperiment('platform_editor_controls', 'variant1') && options.allowPixelResizing) {
+      if (options && options.allowAdvancedToolBarOptions && options.allowResizing && areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar)) && options.allowPixelResizing) {
         pmPlugins.push({
           name: 'mediaPixelResizing',
           plugin: createMediaPixelResizingPlugin

package/dist/es2019/nodeviews/mediaNodeView/index.js

@@ -96,7 +96,11 @@ class MediaNodeView extends SelectionBasedNodeView {
           height
         };
         const isSelectedAndInteracted = this.nodeInsideSelection() && interactionState !== 'hasNotHadInteraction';
+        const {
+          pluginInjectionApi
+        } = this.reactComponentProps;
         return /*#__PURE__*/React.createElement(MediaNode, {
+          api: pluginInjectionApi,
           view: this.view,
           node: this.node,
           getPos: getPos,
@@ -108,7 +112,8 @@ class MediaNodeView extends SelectionBasedNodeView {
           contextIdentifierProvider: contextIdentifierProvider,
           mediaOptions: mediaOptions,
           onExternalImageLoaded: this.onExternalImageLoaded,
-          isViewOnly: ((_this$reactComponentP = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP === void 0 ? void 0 : (_this$reactComponentP2 = _this$reactComponentP.editorViewMode) === null || _this$reactComponentP2 === void 0 ? void 0 : (_this$reactComponentP3 = _this$reactComponentP2.sharedState.currentState()) === null || _this$reactComponentP3 === void 0 ? void 0 : _this$reactComponentP3.mode) === 'view'
+          isViewOnly: ((_this$reactComponentP = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP === void 0 ? void 0 : (_this$reactComponentP2 = _this$reactComponentP.editorViewMode) === null || _this$reactComponentP2 === void 0 ? void 0 : (_this$reactComponentP3 = _this$reactComponentP2.sharedState.currentState()) === null || _this$reactComponentP3 === void 0 ? void 0 : _this$reactComponentP3.mode) === 'view',
+          pluginInjectionApi: this.reactComponentProps.pluginInjectionApi
         });
       };
     });

package/dist/es2019/nodeviews/mediaNodeView/media.js

@@ -3,10 +3,12 @@ import React, { Component } from 'react';
 import { bind } from 'bind-event-listener';
 import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
 import { setNodeSelection, setTextSelection, withImageLoader } from '@atlaskit/editor-common/utils';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { Card, CardLoading } from '@atlaskit/media-card';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { stateKey as mediaStateKey } from '../../pm-plugins/plugin-key';
 import { MediaCardWrapper } from '../styles';
@@ -35,12 +37,13 @@ export class MediaNode extends Component {
     _defineProperty(this, "selectMediaSingleFromCard", ({
       event
     }) => {
+      var _this$props$pluginInj;
       this.selectMediaSingle(event);
 
       // In edit mode (node content wrapper has contenteditable set to true), link redirection is disabled by default
       // We need to call "stopPropagation" here in order to prevent in editor view mode, the browser from navigating to
       // another URL if the media node is wrapped in a link mark.
-      if (this.props.isViewOnly && editorExperiment('platform_editor_controls', 'variant1')) {
+      if (this.props.isViewOnly && areToolbarFlagsEnabled(Boolean((_this$props$pluginInj = this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 ? void 0 : _this$props$pluginInj.toolbar))) {
         event.preventDefault();
       }
     });
@@ -184,7 +187,8 @@ export class MediaNode extends Component {
       originalDimensions,
       isLoading,
       maxDimensions,
-      mediaOptions
+      mediaOptions,
+      api
     } = this.props;
     const borderMark = node.marks.find(m => m.type.name === 'border');
     const {
@@ -266,7 +270,8 @@ export class MediaNode extends Component {
       ssr: ssr,
       mediaSettings: {
         canUpdateVideoCaptions: fg('platform_media_video_captions') ? !!viewAndUploadMediaClientConfig : false
-      }
+      },
+      onError: expValEquals('platform_editor_media_error_analytics', 'isEnabled', true) ? reason => api === null || api === void 0 ? void 0 : api.media.actions.handleMediaNodeRenderError(node, reason) : undefined
     })));
   }
 }

package/dist/es2019/nodeviews/mediaSingleNext.js

@@ -7,15 +7,16 @@ import React, { Fragment } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { browser as browserLegacy, getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { usePreviousState } from '@atlaskit/editor-common/hooks';
 import { captionMessages } from '@atlaskit/editor-common/media';
 import { calcMediaSinglePixelWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, ExternalImageBadge, getMaxWidthForNestedNode, MEDIA_SINGLE_GUTTER_SIZE, MediaBadges } from '@atlaskit/editor-common/media-single';
 import { MediaSingle } from '@atlaskit/editor-common/ui';
-import { browser } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { getAttrsFromUrl } from '@atlaskit/media-client';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { insertAndSelectCaptionFromMediaSinglePos } from '../pm-plugins/commands/captions';
 import { isMediaBlobUrlFromAttrs } from '../pm-plugins/utils/media-common';
 import { CaptionPlaceholder, CaptionPlaceholderButton } from '../ui/CaptionPlaceholder';
@@ -393,6 +394,7 @@ export const MediaSingleNodeNext = mediaSingleNodeNextProps => {
   const captionPlaceHolderRef = /*#__PURE__*/React.createRef();
   const onMediaSingleClicked = React.useCallback(event => {
     var _captionPlaceHolderRe;
+    const browser = expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) ? getBrowserInfo() : browserLegacy;
     // Workaround for iOS 16 Caption selection issue
     // @see https://product-fabric.atlassian.net/browse/MEX-2012
     if (!browser.ios) {