@atlaskit/editor-plugin-media 8.2.1 → 8.3.1

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

@@ -19,7 +19,6 @@ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import ChevronLeftLargeIcon from '@atlaskit/icon/core/migration/chevron-left--chevron-left-large';
 import CrossCircleIcon from '@atlaskit/icon/core/migration/cross-circle';
 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
 
@@ -123,9 +122,10 @@ export class AltTextEditComponent extends React.Component {
       });
     });
     _defineProperty(this, "handleOnBlur", e => {
+      var _this$props$areAnyNew;
       // prevent other selection transaction gets triggered
       e.stopPropagation();
-      if (editorExperiment('platform_editor_controls', 'variant1')) {
+      if ((_this$props$areAnyNew = this.props.areAnyNewToolbarFlagsEnabled) !== null && _this$props$areAnyNew !== void 0 ? _this$props$areAnyNew : areToolbarFlagsEnabled()) {
         this.closeMediaAltTextMenuAndSetFocus();
       } else {
         this.closeMediaAltTextMenu();
@@ -165,7 +165,7 @@ export class AltTextEditComponent extends React.Component {
     return [];
   }
   render() {
-    var _this$props$areAnyNew, _this$props$areAnyNew2;
+    var _this$props$areAnyNew2, _this$props$areAnyNew3, _this$props$areAnyNew4;
     const {
       intl: {
         formatMessage
@@ -188,7 +188,7 @@ export class AltTextEditComponent extends React.Component {
       }, error);
     });
     const hasErrors = !!errorsList.length;
-    const onSubmit = editorExperiment('platform_editor_controls', 'variant1') ? this.closeMediaAltTextMenuAndSetFocus : this.closeMediaAltTextMenu;
+    const onSubmit = ((_this$props$areAnyNew2 = this.props.areAnyNewToolbarFlagsEnabled) !== null && _this$props$areAnyNew2 !== void 0 ? _this$props$areAnyNew2 : areToolbarFlagsEnabled()) ? this.closeMediaAltTextMenuAndSetFocus : this.closeMediaAltTextMenu;
     return jsx("div", {
       css: containerStyles
     }, jsx("section", {
@@ -203,7 +203,7 @@ export class AltTextEditComponent extends React.Component {
       }),
       tooltipContent: backButtonMessageComponent,
       onClick: this.closeMediaAltTextMenu,
-      areAnyNewToolbarFlagsEnabled: (_this$props$areAnyNew = this.props.areAnyNewToolbarFlagsEnabled) !== null && _this$props$areAnyNew !== void 0 ? _this$props$areAnyNew : areToolbarFlagsEnabled()
+      areAnyNewToolbarFlagsEnabled: (_this$props$areAnyNew3 = this.props.areAnyNewToolbarFlagsEnabled) !== null && _this$props$areAnyNew3 !== void 0 ? _this$props$areAnyNew3 : areToolbarFlagsEnabled()
     })), jsx(PanelTextInput, {
       testId: "alt-text-input",
       ariaLabel: formatMessage(messages.placeholder),
@@ -230,7 +230,7 @@ export class AltTextEditComponent extends React.Component {
       })),
       tooltipContent: formatMessage(messages.clear),
       onClick: this.handleClearText,
-      areAnyNewToolbarFlagsEnabled: (_this$props$areAnyNew2 = this.props.areAnyNewToolbarFlagsEnabled) !== null && _this$props$areAnyNew2 !== void 0 ? _this$props$areAnyNew2 : areToolbarFlagsEnabled()
+      areAnyNewToolbarFlagsEnabled: (_this$props$areAnyNew4 = this.props.areAnyNewToolbarFlagsEnabled) !== null && _this$props$areAnyNew4 !== void 0 ? _this$props$areAnyNew4 : areToolbarFlagsEnabled()
     }))), hasErrors && jsx("section", {
       id: "errors-list",
       ref: this.errorsListRef,

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

@@ -8,6 +8,7 @@ import { useCallback } from 'react';
 import { jsx } from '@emotion/react';
 import { pixelEntryMessages as messages } from '@atlaskit/editor-common/media';
 import { calcMinWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
+import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { hasParentNode } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
@@ -68,6 +69,7 @@ export const PixelEntry = ({
   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;
+  const areAnyNewToolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar));
   return jsx(PixelEntryComponent, {
     intl: intl,
     width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
@@ -120,7 +122,8 @@ export const PixelEntry = ({
       }
     },
     isViewMode: pluginState.isResizing,
-    triggerButtonSelector: triggerButtonSelector
+    triggerButtonSelector: triggerButtonSelector,
+    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
   });
 };
 export const FullWidthDisplay = ({

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

@@ -16,7 +16,6 @@ import CrossIcon from '@atlaskit/icon/core/cross';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Inline, Box, Text, xcss } from '@atlaskit/primitives';
 import Textfield from '@atlaskit/textfield';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import Tooltip from '@atlaskit/tooltip';
 import { PIXEL_RESIZING_TOOLBAR_WIDTH, PIXEL_VIEW_MODE_TOOLBAR_WIDTH, PIXELENTRY_MIGRATION_BUTTON_TESTID } from './constants';
 import { pixelEntryForm, pixelEntryHiddenSubmit, pixelSizingHeightInput, pixelSizingInput, pixelSizingWidthInput, pixelSizingWrapper } from './styles';
@@ -38,7 +37,8 @@ export const PixelEntryComponent = ({
   showMigration,
   onMigrate,
   onCloseAndSave,
-  isViewMode
+  isViewMode,
+  areAnyNewToolbarFlagsEnabled
 }) => {
   const ratioWidth = useMemo(() => {
     return mediaHeight / mediaWidth;
@@ -152,7 +152,7 @@ export const PixelEntryComponent = ({
       testId: PIXELENTRY_MIGRATION_BUTTON_TESTID
     }, formatMessage(messages.migrationButtonText)));
   }
-  if (editorExperiment('platform_editor_controls', 'variant1')) {
+  if (areAnyNewToolbarFlagsEnabled) {
     return jsx(PixelEntryComponentNext, {
       maxWidth: maxWidth,
       formatMessage: formatMessage,

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

@@ -5,7 +5,6 @@ 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 ImageAltTextIcon from '@atlaskit/icon-lab/core/image-alt-text';
-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';
@@ -54,7 +53,7 @@ const altTextEditComponent = options => {
           },
           dispatch
         } = view;
-        const elementSelector = options !== null && options !== void 0 && options.triggerButtonSelector && editorExperiment('platform_editor_controls', 'variant1') ? options.triggerButtonSelector : `[data-testid="${testId}"]`;
+        const elementSelector = options !== null && options !== void 0 && options.triggerButtonSelector && options !== null && options !== void 0 && options.areAnyNewToolbarFlagsEnabled ? 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);

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

@@ -21,7 +21,6 @@ import { mediaFilmstripItemDOMSelector } from '@atlaskit/media-filmstrip';
 import { messages } from '@atlaskit/media-ui';
 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 { MediaSingleNodeSelector } from '../../nodeviews/styles';
 import { getPluginState as getMediaAltTextPluginState } from '../../pm-plugins/alt-text';
 import { showLinkingToolbar } from '../../pm-plugins/commands/linking';
@@ -756,7 +755,7 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
 
   // 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') ? `[data-testid="${overflowDropdwonBtnTriggerTestId}"]` : undefined;
+  const overflowButtonSelector = areToolbarFlagsEnabled(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar)) ? `[data-testid="${overflowDropdwonBtnTriggerTestId}"]` : undefined;
   if (allowAltTextOnImages) {
     const mediaAltTextPluginState = getMediaAltTextPluginState(state);
     if (mediaAltTextPluginState.isAltTextEditorOpen) {
@@ -773,7 +772,7 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
     selection
   } = state;
   const isWithinTable = hasParentNodeOfType([state.schema.nodes.table])(selection);
-  if (allowAdvancedToolBarOptions && allowResizing && (!isWithinTable || allowResizingInTables === true) && allowPixelResizing && editorExperiment('platform_editor_controls', 'variant1')) {
+  if (allowAdvancedToolBarOptions && allowResizing && (!isWithinTable || allowResizingInTables === true) && allowPixelResizing && areToolbarFlagsEnabled(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar))) {
     const mediaPixelResizingPluginState = getMediaPixelResizingPluginState(state);
     if (mediaPixelResizingPluginState !== null && mediaPixelResizingPluginState !== void 0 && mediaPixelResizingPluginState.isPixelEditorOpen) {
       return getPixelResizingToolbar(baseToolbar, {

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

@@ -6,7 +6,6 @@ import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-che
 import { RECENT_SEARCH_HEIGHT_IN_PX, RECENT_SEARCH_WIDTH_IN_PX } from '@atlaskit/editor-common/ui';
 import LinkIcon from '@atlaskit/icon/core/link';
 import LinkExternalIcon from '@atlaskit/icon/core/link-external';
-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';
@@ -60,7 +59,7 @@ export const getLinkingToolbar = (toolbarBaseConfig, mediaLinkingState, state, i
               return null;
             }
             const setFocusOnFloatingToolbar = setFocus => {
-              if (setFocus && editorExperiment('platform_editor_controls', 'variant1')) {
+              if (setFocus && areToolbarFlagsEnabled(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar))) {
                 var _pluginInjectionApi$f, _pluginInjectionApi$f2;
                 const {
                   state: {
@@ -103,7 +102,7 @@ export const getLinkingToolbar = (toolbarBaseConfig, mediaLinkingState, state, i
                   },
                   dispatch
                 } = view;
-                const selector = editorExperiment('platform_editor_controls', 'variant1') ? FORCE_FOCUS_SELECTOR_EDITOR_CONTROLS : FORCE_FOCUS_SELECTOR;
+                const selector = areToolbarFlagsEnabled(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar)) ? 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);
               },

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

@@ -11,7 +11,6 @@ import MaximizeIcon from '@atlaskit/icon/core/maximize';
 import DownloadIcon from '@atlaskit/icon/core/migration/download';
 import SmartLinkCardIcon from '@atlaskit/icon/core/smart-link-card';
 import { messages } from '@atlaskit/media-ui';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { showLinkingToolbar } from '../../pm-plugins/commands/linking';
 import { getMediaLinkingState } from '../../pm-plugins/linking';
 import { currentMediaOrInlineNodeBorderMark } from '../../pm-plugins/utils/current-media-node';
@@ -175,7 +174,7 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
   const mediaSingleTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaSingle);
   const widthPluginState = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.currentState();
   const inlineImageItems = [];
-  const isEditorControlsEnabled = editorExperiment('platform_editor_controls', 'variant1');
+  const isEditorControlsEnabled = areToolbarFlagsEnabled(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar));
   const {
     isViewOnly,
     allowAltTextOnImages,

package/dist/esm/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';
@@ -99,6 +100,7 @@ export var 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) {
@@ -108,9 +110,27 @@ export var mediaPlugin = function mediaPlugin(_ref3) {
       return stateKey.getState(editorState) || null;
     },
     actions: {
-      insertMediaAsMediaSingle: function insertMediaAsMediaSingle(view, node, inputMethod, insertMediaVia) {
+      handleMediaNodeRenderError: function handleMediaNodeRenderError(node, reason) {
         var _api$analytics;
-        return _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: ACTION.ERRORED,
+          actionSubject: ACTION_SUBJECT.EDITOR,
+          actionSubjectId: ACTION_SUBJECT_ID.MEDIA,
+          eventType: EVENT_TYPE.UI,
+          attributes: {
+            reason: reason,
+            external: node.attrs.__external
+          }
+        });
+      },
+      insertMediaAsMediaSingle: function insertMediaAsMediaSingle(view, node, inputMethod, insertMediaVia) {
+        var _api$analytics2;
+        return _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;
@@ -205,9 +225,9 @@ export var 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 keymapPlugin(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 keymapPlugin(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) {
@@ -227,9 +247,9 @@ export var mediaPlugin = function mediaPlugin(_ref3) {
         pmPlugins.push({
           name: 'mediaAltTextKeymap',
           plugin: function plugin(_ref9) {
-            var _api$analytics3;
+            var _api$analytics4;
             var schema = _ref9.schema;
-            return keymapMediaAltTextPlugin(schema, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions);
+            return keymapMediaAltTextPlugin(schema, api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions);
           }
         });
       }
@@ -249,7 +269,7 @@ export var mediaPlugin = function mediaPlugin(_ref3) {
           }
         });
       }
-      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/esm/nodeviews/mediaNodeView/index.js

@@ -103,7 +103,9 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
           height: height
         };
         var isSelectedAndInteracted = _this.nodeInsideSelection() && interactionState !== 'hasNotHadInteraction';
+        var pluginInjectionApi = _this.reactComponentProps.pluginInjectionApi;
         return /*#__PURE__*/React.createElement(MediaNode, {
+          api: pluginInjectionApi,
           view: _this.view,
           node: _this.node,
           getPos: getPos,
@@ -115,7 +117,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/esm/nodeviews/mediaNodeView/media.js

@@ -12,10 +12,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';
@@ -56,13 +58,14 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
       }, _callee);
     })));
     _defineProperty(_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 && 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();
       }
     });
@@ -235,7 +238,8 @@ export var 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';
       });
@@ -316,7 +320,10 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
         ssr: ssr,
         mediaSettings: {
           canUpdateVideoCaptions: fg('platform_media_video_captions') ? !!viewAndUploadMediaClientConfig : false
-        }
+        },
+        onError: 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/esm/nodeviews/mediaSingleNext.js

@@ -13,15 +13,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';
@@ -427,6 +428,7 @@ export var MediaSingleNodeNext = function MediaSingleNodeNext(mediaSingleNodeNex
   var captionPlaceHolderRef = /*#__PURE__*/React.createRef();
   var onMediaSingleClicked = React.useCallback(function (event) {
     var _captionPlaceHolderRe;
+    var 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) {

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

@@ -26,7 +26,6 @@ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import ChevronLeftLargeIcon from '@atlaskit/icon/core/migration/chevron-left--chevron-left-large';
 import CrossCircleIcon from '@atlaskit/icon/core/migration/cross-circle';
 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
 
@@ -131,9 +130,10 @@ export var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
       });
     });
     _defineProperty(_this, "handleOnBlur", function (e) {
+      var _this$props$areAnyNew;
       // prevent other selection transaction gets triggered
       e.stopPropagation();
-      if (editorExperiment('platform_editor_controls', 'variant1')) {
+      if ((_this$props$areAnyNew = _this.props.areAnyNewToolbarFlagsEnabled) !== null && _this$props$areAnyNew !== void 0 ? _this$props$areAnyNew : areToolbarFlagsEnabled()) {
         _this.closeMediaAltTextMenuAndSetFocus();
       } else {
         _this.closeMediaAltTextMenu();
@@ -179,7 +179,7 @@ export var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     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(messages.back);
@@ -196,7 +196,7 @@ export var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
         }, error);
       });
       var hasErrors = !!errorsList.length;
-      var onSubmit = 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 : areToolbarFlagsEnabled()) ? this.closeMediaAltTextMenuAndSetFocus : this.closeMediaAltTextMenu;
       return jsx("div", {
         css: containerStyles
       }, jsx("section", {
@@ -211,7 +211,7 @@ export var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
         }),
         tooltipContent: backButtonMessageComponent,
         onClick: this.closeMediaAltTextMenu,
-        areAnyNewToolbarFlagsEnabled: (_this$props$areAnyNew = this.props.areAnyNewToolbarFlagsEnabled) !== null && _this$props$areAnyNew !== void 0 ? _this$props$areAnyNew : areToolbarFlagsEnabled()
+        areAnyNewToolbarFlagsEnabled: (_this$props$areAnyNew3 = this.props.areAnyNewToolbarFlagsEnabled) !== null && _this$props$areAnyNew3 !== void 0 ? _this$props$areAnyNew3 : areToolbarFlagsEnabled()
       })), jsx(PanelTextInput, {
         testId: "alt-text-input",
         ariaLabel: formatMessage(messages.placeholder),
@@ -238,7 +238,7 @@ export var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
         })),
         tooltipContent: formatMessage(messages.clear),
         onClick: this.handleClearText,
-        areAnyNewToolbarFlagsEnabled: (_this$props$areAnyNew2 = this.props.areAnyNewToolbarFlagsEnabled) !== null && _this$props$areAnyNew2 !== void 0 ? _this$props$areAnyNew2 : areToolbarFlagsEnabled()
+        areAnyNewToolbarFlagsEnabled: (_this$props$areAnyNew4 = this.props.areAnyNewToolbarFlagsEnabled) !== null && _this$props$areAnyNew4 !== void 0 ? _this$props$areAnyNew4 : areToolbarFlagsEnabled()
       }))), hasErrors && jsx("section", {
         id: "errors-list",
         ref: this.errorsListRef,

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

@@ -11,6 +11,7 @@ import { useCallback } from 'react';
 import { jsx } from '@emotion/react';
 import { pixelEntryMessages as messages } from '@atlaskit/editor-common/media';
 import { calcMinWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
+import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { hasParentNode } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
@@ -66,6 +67,7 @@ export var PixelEntry = function PixelEntry(_ref) {
   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;
+  var areAnyNewToolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar));
   return jsx(PixelEntryComponent, {
     intl: intl,
     width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
@@ -117,7 +119,8 @@ export var PixelEntry = function PixelEntry(_ref) {
       }
     },
     isViewMode: pluginState.isResizing,
-    triggerButtonSelector: triggerButtonSelector
+    triggerButtonSelector: triggerButtonSelector,
+    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
   });
 };
 export var FullWidthDisplay = function FullWidthDisplay(_ref4) {

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

@@ -17,7 +17,6 @@ import CrossIcon from '@atlaskit/icon/core/cross';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Inline, Box, Text, xcss } from '@atlaskit/primitives';
 import Textfield from '@atlaskit/textfield';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import Tooltip from '@atlaskit/tooltip';
 import { PIXEL_RESIZING_TOOLBAR_WIDTH, PIXEL_VIEW_MODE_TOOLBAR_WIDTH, PIXELENTRY_MIGRATION_BUTTON_TESTID } from './constants';
 import { pixelEntryForm, pixelEntryHiddenSubmit, pixelSizingHeightInput, pixelSizingInput, pixelSizingWidthInput, pixelSizingWrapper } from './styles';
@@ -37,7 +36,8 @@ export var PixelEntryComponent = function PixelEntryComponent(_ref) {
     showMigration = _ref.showMigration,
     onMigrate = _ref.onMigrate,
     onCloseAndSave = _ref.onCloseAndSave,
-    isViewMode = _ref.isViewMode;
+    isViewMode = _ref.isViewMode,
+    areAnyNewToolbarFlagsEnabled = _ref.areAnyNewToolbarFlagsEnabled;
   var ratioWidth = useMemo(function () {
     return mediaHeight / mediaWidth;
   }, [mediaHeight, mediaWidth]);
@@ -158,7 +158,7 @@ export var PixelEntryComponent = function PixelEntryComponent(_ref) {
       testId: PIXELENTRY_MIGRATION_BUTTON_TESTID
     }, formatMessage(messages.migrationButtonText)));
   }
-  if (editorExperiment('platform_editor_controls', 'variant1')) {
+  if (areAnyNewToolbarFlagsEnabled) {
     return jsx(PixelEntryComponentNext, {
       maxWidth: maxWidth,
       formatMessage: formatMessage,

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

@@ -8,7 +8,6 @@ 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 ImageAltTextIcon from '@atlaskit/icon-lab/core/image-alt-text';
-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';
@@ -53,7 +52,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 && 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/esm/ui/toolbar/index.js

@@ -25,7 +25,6 @@ import { mediaFilmstripItemDOMSelector } from '@atlaskit/media-filmstrip';
 import { messages } from '@atlaskit/media-ui';
 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 { MediaSingleNodeSelector } from '../../nodeviews/styles';
 import { getPluginState as getMediaAltTextPluginState } from '../../pm-plugins/alt-text';
 import { showLinkingToolbar } from '../../pm-plugins/commands/linking';
@@ -747,7 +746,7 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
 
   // 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 = editorExperiment('platform_editor_controls', 'variant1') ? "[data-testid=\"".concat(overflowDropdwonBtnTriggerTestId, "\"]") : undefined;
+  var overflowButtonSelector = areToolbarFlagsEnabled(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar)) ? "[data-testid=\"".concat(overflowDropdwonBtnTriggerTestId, "\"]") : undefined;
   if (allowAltTextOnImages) {
     var mediaAltTextPluginState = getMediaAltTextPluginState(state);
     if (mediaAltTextPluginState.isAltTextEditorOpen) {
@@ -762,7 +761,7 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
   }
   var selection = state.selection;
   var isWithinTable = hasParentNodeOfType([state.schema.nodes.table])(selection);
-  if (allowAdvancedToolBarOptions && allowResizing && (!isWithinTable || allowResizingInTables === true) && allowPixelResizing && editorExperiment('platform_editor_controls', 'variant1')) {
+  if (allowAdvancedToolBarOptions && allowResizing && (!isWithinTable || allowResizingInTables === true) && allowPixelResizing && areToolbarFlagsEnabled(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar))) {
     var mediaPixelResizingPluginState = getMediaPixelResizingPluginState(state);
     if (mediaPixelResizingPluginState !== null && mediaPixelResizingPluginState !== void 0 && mediaPixelResizingPluginState.isPixelEditorOpen) {
       return getPixelResizingToolbar(baseToolbar, {

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

@@ -9,7 +9,6 @@ import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-che
 import { RECENT_SEARCH_HEIGHT_IN_PX, RECENT_SEARCH_WIDTH_IN_PX } from '@atlaskit/editor-common/ui';
 import LinkIcon from '@atlaskit/icon/core/link';
 import LinkExternalIcon from '@atlaskit/icon/core/link-external';
-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';
@@ -55,7 +54,7 @@ export var getLinkingToolbar = function getLinkingToolbar(toolbarBaseConfig, med
               return null;
             }
             var setFocusOnFloatingToolbar = function setFocusOnFloatingToolbar(setFocus) {
-              if (setFocus && editorExperiment('platform_editor_controls', 'variant1')) {
+              if (setFocus && areToolbarFlagsEnabled(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar))) {
                 var _pluginInjectionApi$f;
                 var tr = view.state.tr,
                   dispatch = view.dispatch;
@@ -90,7 +89,7 @@ export var getLinkingToolbar = function getLinkingToolbar(toolbarBaseConfig, med
                  */
                 var tr = view.state.tr,
                   dispatch = view.dispatch;
-                var selector = editorExperiment('platform_editor_controls', 'variant1') ? FORCE_FOCUS_SELECTOR_EDITOR_CONTROLS : FORCE_FOCUS_SELECTOR;
+                var selector = 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/esm/ui/toolbar/mediaInline.js

@@ -14,7 +14,6 @@ import MaximizeIcon from '@atlaskit/icon/core/maximize';
 import DownloadIcon from '@atlaskit/icon/core/migration/download';
 import SmartLinkCardIcon from '@atlaskit/icon/core/smart-link-card';
 import { messages } from '@atlaskit/media-ui';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { showLinkingToolbar } from '../../pm-plugins/commands/linking';
 import { getMediaLinkingState } from '../../pm-plugins/linking';
 import { currentMediaOrInlineNodeBorderMark } from '../../pm-plugins/utils/current-media-node';
@@ -180,7 +179,7 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
   var mediaSingleTitle = intl.formatMessage(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 = editorExperiment('platform_editor_controls', 'variant1');
+  var isEditorControlsEnabled = areToolbarFlagsEnabled(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar));
   var isViewOnly = options.isViewOnly,
     allowAltTextOnImages = options.allowAltTextOnImages,
     allowLinking = options.allowLinking,

package/dist/types/mediaPluginType.d.ts

@@ -17,6 +17,7 @@ import type { InteractionPlugin } from '@atlaskit/editor-plugin-interaction';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { MediaPluginState } from './pm-plugins/types';
 import type { InsertMediaAsMediaSingle } from './pm-plugins/utils/media-single';
 import type { MediaOptions } from './types';
@@ -41,6 +42,10 @@ export type MediaPluginDependencies = [
 ];
 export type MediaNextEditorPluginType = NextEditorPlugin<'media', {
     actions: {
+        /**
+         * Callback to be called when there is an error rendering a media node.
+         */
+        handleMediaNodeRenderError: (node: PMNode, reason: string) => void;
         insertMediaAsMediaSingle: InsertMediaAsMediaSingle;
         /**
          * Used to update the initial provider passed to the media plugin.