@atlaskit/editor-plugin-media 1.32.2 → 1.33.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-media
 
+## 1.33.1
+
+### Patch Changes
+
+- [#145306](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/145306)
+  [`ca98d98a06d25`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ca98d98a06d25) -
+  ED-25128 Add exposure point for when external media is rendered platform_editor_add_media_from_url
+
+## 1.33.0
+
+### Minor Changes
+
+- [#145463](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/145463)
+  [`d63935e60e04b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d63935e60e04b) -
+  [ux] ED-24924 Fix media preview broken for external images
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.32.2
 
 ### Patch Changes

package/dist/cjs/nodeviews/mediaSingle.js

@@ -301,6 +301,7 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
     key: "componentDidMount",
     value: function () {
       var _componentDidMount = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
+        var _this$props$node$firs2;
         var contextIdentifierProvider;
         return _regenerator.default.wrap(function _callee3$(_context3) {
           while (1) switch (_context3.prev = _context3.next) {
@@ -319,7 +320,20 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
                 contextIdentifierProvider: _context3.t1
               };
               _context3.t0.setState.call(_context3.t0, _context3.t2);
-            case 10:
+              // No-op but logging an exposure when an external image is rendered
+              // Remove this block when cleaning up platform_editor_add_media_from_url
+              if (((_this$props$node$firs2 = this.props.node.firstChild) === null || _this$props$node$firs2 === void 0 ? void 0 : _this$props$node$firs2.attrs.type) === 'external') {
+                if ((0, _experiments.editorExperiment)('add-media-from-url', true)) {
+                  (0, _experiments.editorExperiment)('add-media-from-url', true, {
+                    exposure: true
+                  });
+                } else {
+                  (0, _experiments.editorExperiment)('add-media-from-url', true, {
+                    exposure: false
+                  });
+                }
+              }
+            case 11:
             case "end":
               return _context3.stop();
           }

package/dist/cjs/toolbar/utils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.removeMediaGroupNode = exports.getSelectedNearestMediaContainerNodeAttrs = exports.getSelectedMediaSingle = exports.getSelectedLayoutIcon = exports.getPixelWidthOfElement = exports.getMaxToolbarWidth = exports.downloadMedia = exports.canShowSwitchButtons = exports.calcNewLayout = void 0;
+exports.removeMediaGroupNode = exports.isExternalMedia = exports.getSelectedNearestMediaContainerNodeAttrs = exports.getSelectedMediaSingle = exports.getSelectedLayoutIcon = exports.getPixelWidthOfElement = exports.getMaxToolbarWidth = exports.downloadMedia = exports.canShowSwitchButtons = exports.calcNewLayout = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
@@ -14,6 +14,9 @@ var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _mediaClientReact = require("@atlaskit/media-client-react");
 var _mediaSingle2 = require("../utils/media-single");
+var isExternalMedia = exports.isExternalMedia = function isExternalMedia(attrs) {
+  return attrs.type === 'external';
+};
 var getSelectedMediaContainerNodeAttrs = function getSelectedMediaContainerNodeAttrs(mediaPluginState) {
   var _mediaPluginState$sel;
   var selectedNode = (_mediaPluginState$sel = mediaPluginState.selectedMediaContainerNode) === null || _mediaPluginState$sel === void 0 ? void 0 : _mediaPluginState$sel.call(mediaPluginState);
@@ -46,7 +49,7 @@ var downloadMedia = exports.downloadMedia = /*#__PURE__*/function () {
         case 0:
           _context.prev = 0;
           selectedNodeAttrs = isViewMode ? getSelectedNearestMediaContainerNodeAttrs(mediaPluginState) : getSelectedMediaContainerNodeAttrs(mediaPluginState);
-          if (!(selectedNodeAttrs && mediaPluginState.mediaClientConfig)) {
+          if (!(selectedNodeAttrs && mediaPluginState.mediaClientConfig && !isExternalMedia(selectedNodeAttrs))) {
             _context.next = 10;
             break;
           }

package/dist/cjs/ui/MediaViewer/PortalWrapper.js

@@ -8,13 +8,44 @@ exports.RenderMediaViewer = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _mediaViewer = require("@atlaskit/media-viewer");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _utils = require("../../toolbar/utils");
+var getIdentifier = function getIdentifier(attrs) {
+  if ((0, _utils.isExternalMedia)(attrs)) {
+    return {
+      mediaItemType: 'external-image',
+      dataURI: attrs.url
+    };
+  } else {
+    var id = attrs.id,
+      _attrs$collection = attrs.collection,
+      collection = _attrs$collection === void 0 ? '' : _attrs$collection;
+    return {
+      id: id,
+      mediaItemType: 'file',
+      collectionName: collection
+    };
+  }
+};
 var RenderMediaViewer = exports.RenderMediaViewer = function RenderMediaViewer(_ref) {
   var mediaClientConfig = _ref.mediaClientConfig,
     onClose = _ref.onClose,
     selectedNodeAttrs = _ref.selectedNodeAttrs;
-  var id = selectedNodeAttrs.id,
-    _selectedNodeAttrs$co = selectedNodeAttrs.collection,
-    collection = _selectedNodeAttrs$co === void 0 ? '' : _selectedNodeAttrs$co;
+  if ((0, _experiments.editorExperiment)('add-media-from-url', true)) {
+    var _identifier = getIdentifier(selectedNodeAttrs);
+    var collectionName = (0, _utils.isExternalMedia)(selectedNodeAttrs) ? '' : selectedNodeAttrs.collection;
+    return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_mediaViewer.MediaViewer, {
+      collectionName: collectionName,
+      items: [],
+      mediaClientConfig: mediaClientConfig,
+      selectedItem: _identifier,
+      onClose: onClose
+    }), document.body);
+  }
+  var _ref2 = selectedNodeAttrs,
+    id = _ref2.id,
+    _ref2$collection = _ref2.collection,
+    collection = _ref2$collection === void 0 ? '' : _ref2$collection;
   var identifier = {
     id: id,
     mediaItemType: 'file',

package/dist/es2019/nodeviews/mediaSingle.js

@@ -226,6 +226,7 @@ export default class MediaSingleNode extends Component {
     }
   }
   async componentDidMount() {
+    var _this$props$node$firs2;
     const {
       contextIdentifierProvider
     } = this.props;
@@ -234,6 +235,20 @@ export default class MediaSingleNode extends Component {
     this.setState({
       contextIdentifierProvider: await contextIdentifierProvider
     });
+
+    // No-op but logging an exposure when an external image is rendered
+    // Remove this block when cleaning up platform_editor_add_media_from_url
+    if (((_this$props$node$firs2 = this.props.node.firstChild) === null || _this$props$node$firs2 === void 0 ? void 0 : _this$props$node$firs2.attrs.type) === 'external') {
+      if (editorExperiment('add-media-from-url', true)) {
+        editorExperiment('add-media-from-url', true, {
+          exposure: true
+        });
+      } else {
+        editorExperiment('add-media-from-url', true, {
+          exposure: false
+        });
+      }
+    }
   }
   render() {
     var _mediaOptions$getEdit, _pluginInjectionApi$m, _pluginInjectionApi$m2, _node$firstChild, _mediaOptions$getEdit2, _mediaOptions$getEdit3;

package/dist/es2019/toolbar/utils.js

@@ -5,6 +5,9 @@ import { findParentNodeOfType, findSelectedNodeOfType, removeParentNodeOfType, r
 import { akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { getMediaClient } from '@atlaskit/media-client-react';
 import { isVideo } from '../utils/media-single';
+export const isExternalMedia = attrs => {
+  return attrs.type === 'external';
+};
 const getSelectedMediaContainerNodeAttrs = mediaPluginState => {
   var _mediaPluginState$sel;
   const selectedNode = (_mediaPluginState$sel = mediaPluginState.selectedMediaContainerNode) === null || _mediaPluginState$sel === void 0 ? void 0 : _mediaPluginState$sel.call(mediaPluginState);
@@ -32,7 +35,7 @@ export const getSelectedNearestMediaContainerNodeAttrs = mediaPluginState => {
 export const downloadMedia = async (mediaPluginState, isViewMode) => {
   try {
     const selectedNodeAttrs = isViewMode ? getSelectedNearestMediaContainerNodeAttrs(mediaPluginState) : getSelectedMediaContainerNodeAttrs(mediaPluginState);
-    if (selectedNodeAttrs && mediaPluginState.mediaClientConfig) {
+    if (selectedNodeAttrs && mediaPluginState.mediaClientConfig && !isExternalMedia(selectedNodeAttrs)) {
       const {
         id,
         collection = ''

package/dist/es2019/ui/MediaViewer/PortalWrapper.js

@@ -1,11 +1,42 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { MediaViewer } from '@atlaskit/media-viewer';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { isExternalMedia } from '../../toolbar/utils';
+const getIdentifier = attrs => {
+  if (isExternalMedia(attrs)) {
+    return {
+      mediaItemType: 'external-image',
+      dataURI: attrs.url
+    };
+  } else {
+    const {
+      id,
+      collection = ''
+    } = attrs;
+    return {
+      id,
+      mediaItemType: 'file',
+      collectionName: collection
+    };
+  }
+};
 export const RenderMediaViewer = ({
   mediaClientConfig,
   onClose,
   selectedNodeAttrs
 }) => {
+  if (editorExperiment('add-media-from-url', true)) {
+    const identifier = getIdentifier(selectedNodeAttrs);
+    const collectionName = isExternalMedia(selectedNodeAttrs) ? '' : selectedNodeAttrs.collection;
+    return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
+      collectionName: collectionName,
+      items: [],
+      mediaClientConfig: mediaClientConfig,
+      selectedItem: identifier,
+      onClose: onClose
+    }), document.body);
+  }
   const {
     id,
     collection = ''

package/dist/esm/nodeviews/mediaSingle.js

@@ -295,6 +295,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
     key: "componentDidMount",
     value: function () {
       var _componentDidMount = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+        var _this$props$node$firs2;
         var contextIdentifierProvider;
         return _regeneratorRuntime.wrap(function _callee3$(_context3) {
           while (1) switch (_context3.prev = _context3.next) {
@@ -313,7 +314,20 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
                 contextIdentifierProvider: _context3.t1
               };
               _context3.t0.setState.call(_context3.t0, _context3.t2);
-            case 10:
+              // No-op but logging an exposure when an external image is rendered
+              // Remove this block when cleaning up platform_editor_add_media_from_url
+              if (((_this$props$node$firs2 = this.props.node.firstChild) === null || _this$props$node$firs2 === void 0 ? void 0 : _this$props$node$firs2.attrs.type) === 'external') {
+                if (editorExperiment('add-media-from-url', true)) {
+                  editorExperiment('add-media-from-url', true, {
+                    exposure: true
+                  });
+                } else {
+                  editorExperiment('add-media-from-url', true, {
+                    exposure: false
+                  });
+                }
+              }
+            case 11:
             case "end":
               return _context3.stop();
           }

package/dist/esm/toolbar/utils.js

@@ -7,6 +7,9 @@ import { findParentNodeOfType, findSelectedNodeOfType, removeParentNodeOfType, r
 import { akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { getMediaClient } from '@atlaskit/media-client-react';
 import { isVideo } from '../utils/media-single';
+export var isExternalMedia = function isExternalMedia(attrs) {
+  return attrs.type === 'external';
+};
 var getSelectedMediaContainerNodeAttrs = function getSelectedMediaContainerNodeAttrs(mediaPluginState) {
   var _mediaPluginState$sel;
   var selectedNode = (_mediaPluginState$sel = mediaPluginState.selectedMediaContainerNode) === null || _mediaPluginState$sel === void 0 ? void 0 : _mediaPluginState$sel.call(mediaPluginState);
@@ -39,7 +42,7 @@ export var downloadMedia = /*#__PURE__*/function () {
         case 0:
           _context.prev = 0;
           selectedNodeAttrs = isViewMode ? getSelectedNearestMediaContainerNodeAttrs(mediaPluginState) : getSelectedMediaContainerNodeAttrs(mediaPluginState);
-          if (!(selectedNodeAttrs && mediaPluginState.mediaClientConfig)) {
+          if (!(selectedNodeAttrs && mediaPluginState.mediaClientConfig && !isExternalMedia(selectedNodeAttrs))) {
             _context.next = 10;
             break;
           }

package/dist/esm/ui/MediaViewer/PortalWrapper.js

@@ -1,13 +1,44 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { MediaViewer } from '@atlaskit/media-viewer';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { isExternalMedia } from '../../toolbar/utils';
+var getIdentifier = function getIdentifier(attrs) {
+  if (isExternalMedia(attrs)) {
+    return {
+      mediaItemType: 'external-image',
+      dataURI: attrs.url
+    };
+  } else {
+    var id = attrs.id,
+      _attrs$collection = attrs.collection,
+      collection = _attrs$collection === void 0 ? '' : _attrs$collection;
+    return {
+      id: id,
+      mediaItemType: 'file',
+      collectionName: collection
+    };
+  }
+};
 export var RenderMediaViewer = function RenderMediaViewer(_ref) {
   var mediaClientConfig = _ref.mediaClientConfig,
     onClose = _ref.onClose,
     selectedNodeAttrs = _ref.selectedNodeAttrs;
-  var id = selectedNodeAttrs.id,
-    _selectedNodeAttrs$co = selectedNodeAttrs.collection,
-    collection = _selectedNodeAttrs$co === void 0 ? '' : _selectedNodeAttrs$co;
+  if (editorExperiment('add-media-from-url', true)) {
+    var _identifier = getIdentifier(selectedNodeAttrs);
+    var collectionName = isExternalMedia(selectedNodeAttrs) ? '' : selectedNodeAttrs.collection;
+    return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
+      collectionName: collectionName,
+      items: [],
+      mediaClientConfig: mediaClientConfig,
+      selectedItem: _identifier,
+      onClose: onClose
+    }), document.body);
+  }
+  var _ref2 = selectedNodeAttrs,
+    id = _ref2.id,
+    _ref2$collection = _ref2.collection,
+    collection = _ref2$collection === void 0 ? '' : _ref2$collection;
   var identifier = {
     id: id,
     mediaItemType: 'file',

package/dist/types/toolbar/utils.d.ts

@@ -1,11 +1,12 @@
-import type { MediaBaseAttributes, RichMediaLayout } from '@atlaskit/adf-schema';
+import type { ExternalMediaAttributes, MediaADFAttrs, RichMediaLayout } from '@atlaskit/adf-schema';
 import type { LayoutIcon } from '@atlaskit/editor-common/card';
 import type { Node as ProseMirrorNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { MediaPluginState } from '../pm-plugins/types';
-export declare const getSelectedNearestMediaContainerNodeAttrs: (mediaPluginState: MediaPluginState) => MediaBaseAttributes | null;
+export declare const isExternalMedia: (attrs: MediaADFAttrs) => attrs is ExternalMediaAttributes;
+export declare const getSelectedNearestMediaContainerNodeAttrs: (mediaPluginState: MediaPluginState) => MediaADFAttrs | null;
 export declare const downloadMedia: (mediaPluginState: MediaPluginState, isViewMode?: boolean) => Promise<boolean>;
 export declare const removeMediaGroupNode: (state: EditorState) => import("prosemirror-state").Transaction;
 export declare const getSelectedMediaSingle: (state: EditorState) => ReturnType<ReturnType<typeof findSelectedNodeOfType>> | ReturnType<ReturnType<typeof findParentNodeOfType>>;

package/dist/types/ui/MediaViewer/PortalWrapper.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-import { type MediaBaseAttributes } from '@atlaskit/adf-schema';
+import type { MediaADFAttrs } from '@atlaskit/adf-schema';
 import type { MediaClientConfig } from '@atlaskit/media-client';
 interface RenderMediaViewerProps {
     mediaClientConfig: MediaClientConfig;
     onClose: () => void;
-    selectedNodeAttrs: MediaBaseAttributes;
+    selectedNodeAttrs: MediaADFAttrs;
 }
 export declare const RenderMediaViewer: ({ mediaClientConfig, onClose, selectedNodeAttrs, }: RenderMediaViewerProps) => React.ReactPortal;
 export {};

package/dist/types-ts4.5/toolbar/utils.d.ts

@@ -1,11 +1,12 @@
-import type { MediaBaseAttributes, RichMediaLayout } from '@atlaskit/adf-schema';
+import type { ExternalMediaAttributes, MediaADFAttrs, RichMediaLayout } from '@atlaskit/adf-schema';
 import type { LayoutIcon } from '@atlaskit/editor-common/card';
 import type { Node as ProseMirrorNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { MediaPluginState } from '../pm-plugins/types';
-export declare const getSelectedNearestMediaContainerNodeAttrs: (mediaPluginState: MediaPluginState) => MediaBaseAttributes | null;
+export declare const isExternalMedia: (attrs: MediaADFAttrs) => attrs is ExternalMediaAttributes;
+export declare const getSelectedNearestMediaContainerNodeAttrs: (mediaPluginState: MediaPluginState) => MediaADFAttrs | null;
 export declare const downloadMedia: (mediaPluginState: MediaPluginState, isViewMode?: boolean) => Promise<boolean>;
 export declare const removeMediaGroupNode: (state: EditorState) => import("prosemirror-state").Transaction;
 export declare const getSelectedMediaSingle: (state: EditorState) => ReturnType<ReturnType<typeof findSelectedNodeOfType>> | ReturnType<ReturnType<typeof findParentNodeOfType>>;

package/dist/types-ts4.5/ui/MediaViewer/PortalWrapper.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-import { type MediaBaseAttributes } from '@atlaskit/adf-schema';
+import type { MediaADFAttrs } from '@atlaskit/adf-schema';
 import type { MediaClientConfig } from '@atlaskit/media-client';
 interface RenderMediaViewerProps {
     mediaClientConfig: MediaClientConfig;
     onClose: () => void;
-    selectedNodeAttrs: MediaBaseAttributes;
+    selectedNodeAttrs: MediaADFAttrs;
 }
 export declare const RenderMediaViewer: ({ mediaClientConfig, onClose, selectedNodeAttrs, }: RenderMediaViewerProps) => React.ReactPortal;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "1.32.2",
+	"version": "1.33.1",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -35,8 +35,8 @@
 		"@atlaskit/adf-schema": "^40.9.0",
 		"@atlaskit/analytics-namespaced-context": "^6.12.0",
 		"@atlaskit/analytics-next": "^10.1.0",
-		"@atlaskit/button": "^20.1.0",
-		"@atlaskit/editor-common": "^91.0.0",
+		"@atlaskit/button": "^20.2.0",
+		"@atlaskit/editor-common": "^91.1.0",
 		"@atlaskit/editor-palette": "1.6.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",
 		"@atlaskit/editor-plugin-annotation": "1.19.8",
@@ -50,15 +50,15 @@
 		"@atlaskit/editor-plugin-selection": "^1.4.0",
 		"@atlaskit/editor-plugin-width": "^1.3.0",
 		"@atlaskit/editor-prosemirror": "6.0.0",
-		"@atlaskit/editor-shared-styles": "^2.13.0",
+		"@atlaskit/editor-shared-styles": "^3.0.0",
 		"@atlaskit/editor-tables": "^2.8.0",
 		"@atlaskit/form": "^10.5.0",
 		"@atlaskit/icon": "^22.18.0",
 		"@atlaskit/media-card": "^78.5.0",
 		"@atlaskit/media-client": "^28.0.0",
 		"@atlaskit/media-client-react": "^2.2.0",
-		"@atlaskit/media-common": "^11.4.0",
-		"@atlaskit/media-filmstrip": "^47.3.0",
+		"@atlaskit/media-common": "^11.5.0",
+		"@atlaskit/media-filmstrip": "^47.4.0",
 		"@atlaskit/media-picker": "^66.7.0",
 		"@atlaskit/media-ui": "^25.15.0",
 		"@atlaskit/media-viewer": "^48.10.0",