@atlaskit/editor-plugin-media 8.2.0 → 8.3.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-media
 
+## 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
+
+- [`5771b6f88f16a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5771b6f88f16a) -
+  Clean up platform_editor_fix_image_size_diff_during_ssr
+- Updated dependencies
+
 ## 8.2.0
 
 ### Minor Changes

package/dist/cjs/mediaPlugin.js

@@ -7,6 +7,7 @@ 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 _state = require("@atlaskit/editor-prosemirror/state");
@@ -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);
           }
         });
       }

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,

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

@@ -22,6 +22,7 @@ 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");
@@ -243,7 +244,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 +326,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/es2019/mediaPlugin.js

@@ -1,4 +1,5 @@
 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 { NodeSelection, PluginKey } from '@atlaskit/editor-prosemirror/state';
@@ -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);
           }
         });
       }

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,

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

@@ -7,6 +7,7 @@ import { setNodeSelection, setTextSelection, withImageLoader } from '@atlaskit/e
 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';
@@ -184,7 +185,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 +268,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) {

package/dist/esm/mediaPlugin.js

@@ -1,4 +1,5 @@
 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 { NodeSelection, PluginKey } from '@atlaskit/editor-prosemirror/state';
@@ -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);
           }
         });
       }

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,

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

@@ -16,6 +16,7 @@ import { setNodeSelection, setTextSelection, withImageLoader } from '@atlaskit/e
 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';
@@ -235,7 +236,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 +318,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/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.

package/dist/types/nodeviews/mediaNodeView/media.d.ts

@@ -1,15 +1,18 @@
 import React, { Component } from 'react';
 import type { UnbindFn } from 'bind-event-listener';
 import type { ContextIdentifierProvider, MediaProvider } from '@atlaskit/editor-common/provider-factory';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { ImageLoaderProps } from '@atlaskit/editor-common/utils';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { CardDimensions, CardOnClickCallback, NumericalCardDimensions } from '@atlaskit/media-card';
 import type { MediaClientConfig } from '@atlaskit/media-core';
+import type { MediaNextEditorPluginType } from '../../mediaPluginType';
 import type { MediaOptions, getPosHandler as ProsemirrorGetPosHandler, ReactNodeProps } from '../../types';
 export declare const MEDIA_HEIGHT = 125;
 export declare const FILE_WIDTH = 156;
 export interface MediaNodeProps extends ReactNodeProps, ImageLoaderProps {
+    api?: ExtractInjectionAPI<MediaNextEditorPluginType>;
     contextIdentifierProvider?: Promise<ContextIdentifierProvider>;
     getPos: ProsemirrorGetPosHandler;
     isLoading?: boolean;

package/dist/types-ts4.5/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.

package/dist/types-ts4.5/nodeviews/mediaNodeView/media.d.ts

@@ -1,15 +1,18 @@
 import React, { Component } from 'react';
 import type { UnbindFn } from 'bind-event-listener';
 import type { ContextIdentifierProvider, MediaProvider } from '@atlaskit/editor-common/provider-factory';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { ImageLoaderProps } from '@atlaskit/editor-common/utils';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { CardDimensions, CardOnClickCallback, NumericalCardDimensions } from '@atlaskit/media-card';
 import type { MediaClientConfig } from '@atlaskit/media-core';
+import type { MediaNextEditorPluginType } from '../../mediaPluginType';
 import type { MediaOptions, getPosHandler as ProsemirrorGetPosHandler, ReactNodeProps } from '../../types';
 export declare const MEDIA_HEIGHT = 125;
 export declare const FILE_WIDTH = 156;
 export interface MediaNodeProps extends ReactNodeProps, ImageLoaderProps {
+    api?: ExtractInjectionAPI<MediaNextEditorPluginType>;
     contextIdentifierProvider?: Promise<ContextIdentifierProvider>;
     getPos: ProsemirrorGetPosHandler;
     isLoading?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "8.2.0",
+	"version": "8.3.0",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -49,12 +49,12 @@
 		"@atlaskit/editor-plugin-toolbar": "^3.3.0",
 		"@atlaskit/editor-plugin-width": "^7.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/editor-shared-styles": "^3.7.0",
+		"@atlaskit/editor-shared-styles": "^3.8.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/form": "^14.2.0",
 		"@atlaskit/icon": "^28.5.0",
 		"@atlaskit/icon-lab": "^5.10.0",
-		"@atlaskit/media-card": "^79.5.0",
+		"@atlaskit/media-card": "^79.6.0",
 		"@atlaskit/media-client": "^35.5.0",
 		"@atlaskit/media-client-react": "^4.1.0",
 		"@atlaskit/media-common": "^12.3.0",
@@ -66,9 +66,9 @@
 		"@atlaskit/primitives": "^16.0.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^13.13.0",
+		"@atlaskit/tmp-editor-statsig": "^13.17.0",
 		"@atlaskit/tokens": "^7.0.0",
-		"@atlaskit/tooltip": "^20.5.0",
+		"@atlaskit/tooltip": "^20.6.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -78,7 +78,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.14.0",
+		"@atlaskit/editor-common": "^110.16.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
@@ -151,9 +151,6 @@
 		"platform_editor_ssr_media": {
 			"type": "boolean"
 		},
-		"platform_editor_fix_image_size_diff_during_ssr": {
-			"type": "boolean"
-		},
 		"platform_editor_track_media_fail_to_insert": {
 			"type": "boolean"
 		},