@atlaskit/editor-plugin-media 0.3.6 → 0.3.8

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-media
 
+## 0.3.8
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.3.7
+
+### Patch Changes
+
+- [#40916](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40916) [`0b80e2e68ea`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0b80e2e68ea) - [ux] media single node with external type media should not show migration ui. Update external image with natural dimensions accordingly, and fixed whitespace issue in external image.
+
 ## 0.3.6
 
 ### Patch Changes

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ReactMediaNode = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -19,8 +20,12 @@ var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 var _selectionBasedNodeView = require("@atlaskit/editor-common/selection-based-node-view");
 var _mediaClient = require("@atlaskit/media-client");
+var _helpers = require("../../commands/helpers");
 var _mediaCommon = require("../../utils/media-common");
 var _media = _interopRequireDefault(require("./media"));
+var _excluded = ["width", "height"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var MediaNodeWithProviders = function MediaNodeWithProviders(_ref) {
@@ -46,6 +51,22 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isSelected", false);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onExternalImageLoaded", function (dimensions) {
+      var getPos = _this.getPos;
+      var _this$getAttrs = _this.getAttrs(),
+        width = _this$getAttrs.width,
+        height = _this$getAttrs.height,
+        rest = (0, _objectWithoutProperties2.default)(_this$getAttrs, _excluded);
+      if (!width || !height) {
+        (0, _helpers.updateCurrentMediaNodeAttrs)(_objectSpread(_objectSpread({}, rest), {}, {
+          width: width || dimensions.width,
+          height: height || dimensions.height
+        }), {
+          node: _this.node,
+          getPos: getPos
+        })(_this.view.state, _this.view.dispatch);
+      }
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderMediaNodeWithState", function (mediaProvider, contextIdentifierProvider) {
       return function (_ref2) {
         var editorWidth = _ref2.width;
@@ -86,7 +107,8 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
           url: url,
           mediaProvider: mediaProvider,
           contextIdentifierProvider: contextIdentifierProvider,
-          mediaOptions: mediaOptions
+          mediaOptions: mediaOptions,
+          onExternalImageLoaded: _this.onExternalImageLoaded
         });
       };
     });

package/dist/cjs/toolbar/index.js

@@ -292,11 +292,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           var maxWidth = maxWidthForNestedNode || _editorSharedStyles.akEditorFullWidthLayoutWidth;
           var isVideoFile = (0, _mediaSingle2.isVideo)(selectedMediaNode.attrs.__fileMimeType);
           var minWidth = (0, _mediaSingle.calcMinWidth)(isVideoFile, maxWidthForNestedNode || contentWidth);
-          var isLegacy = widthType !== 'pixel';
+          var hasPixelType = widthType === 'pixel';
           var pixelWidthFromElement = (0, _utils2.getPixelWidthOfElement)(editorView, selectedMediaSingleNode.pos + 1,
           // get pos of media node
           mediaWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH);
-          var pixelWidth = isLegacy ? pixelWidthFromElement : mediaSingleWidth;
+          var pixelWidth = hasPixelType ? mediaSingleWidth : pixelWidthFromElement;
 
           //hasParentNode will return falsey value if selection depth === 0
           var isNested = (0, _utils.hasParentNode)(function (n) {
@@ -305,7 +305,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           return /*#__PURE__*/_react.default.createElement(_PixelEntry.PixelEntry, {
             intl: intl,
             width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
-            showMigration: !pluginState.isResizing && isLegacy,
+            showMigration: !pluginState.isResizing && !hasPixelType,
             mediaWidth: mediaWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH,
             mediaHeight: mediaHeight || _mediaSingle.DEFAULT_IMAGE_HEIGHT,
             minWidth: minWidth,

package/dist/cjs/toolbar/utils.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.removeMediaGroupNode = exports.getSelectedMediaSingle = exports.getSelectedMediaContainerNodeAttrs = exports.getPixelWidthOfElement = exports.getMaxToolbarWidth = exports.downloadMedia = 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"));
 var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -72,13 +73,13 @@ var getSelectedMediaSingle = exports.getSelectedMediaSingle = function getSelect
   var mediaSingle = state.schema.nodes.mediaSingle;
   return (0, _utils.findSelectedNodeOfType)(mediaSingle)(state.selection) || (0, _utils.findParentNodeOfType)(mediaSingle)(state.selection);
 };
-var getPixelWidthOfElement = exports.getPixelWidthOfElement = function getPixelWidthOfElement(editorView, pos, mediaWidth) {
+var getPixelWidthOfElement = exports.getPixelWidthOfElement = (0, _memoizeOne.default)(function (editorView, pos, mediaWidth) {
   var domNode = editorView.nodeDOM(pos);
   if (domNode instanceof HTMLElement) {
     return domNode.offsetWidth;
   }
   return mediaWidth;
-};
+});
 var calcNewLayout = exports.calcNewLayout = function calcNewLayout(width, layout, contentWidth) {
   var fullWidthMode = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   var isNested = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;

package/dist/cjs/utils/media-single.js

@@ -8,6 +8,7 @@ exports.insertMediaSingleNode = exports.insertMediaAsMediaSingle = exports.creat
 exports.isCaptionNode = isCaptionNode;
 exports.isVideo = exports.isMediaSingle = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _insert = require("@atlaskit/editor-common/insert");
 var _mediaSingle = require("@atlaskit/editor-common/media-single");
@@ -176,6 +177,6 @@ function isCaptionNode(editorView) {
   }
   return false;
 }
-var isVideo = exports.isVideo = function isVideo(fileType) {
+var isVideo = exports.isVideo = (0, _memoizeOne.default)(function (fileType) {
   return !!fileType && fileType.includes('video');
-};
+});

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

@@ -5,6 +5,7 @@ import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-comm
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
 import { getAttrsFromUrl } from '@atlaskit/media-client';
+import { updateCurrentMediaNodeAttrs } from '../../commands/helpers';
 import { isMediaBlobUrlFromAttrs } from '../../utils/media-common';
 import MediaNode from './media';
 const MediaNodeWithProviders = ({
@@ -25,6 +26,24 @@ class MediaNodeView extends SelectionBasedNodeView {
   constructor(...args) {
     super(...args);
     _defineProperty(this, "isSelected", false);
+    _defineProperty(this, "onExternalImageLoaded", dimensions => {
+      const getPos = this.getPos;
+      const {
+        width,
+        height,
+        ...rest
+      } = this.getAttrs();
+      if (!width || !height) {
+        updateCurrentMediaNodeAttrs({
+          ...rest,
+          width: width || dimensions.width,
+          height: height || dimensions.height
+        }, {
+          node: this.node,
+          getPos
+        })(this.view.state, this.view.dispatch);
+      }
+    });
     _defineProperty(this, "renderMediaNodeWithState", (mediaProvider, contextIdentifierProvider) => {
       return ({
         width: editorWidth
@@ -72,7 +91,8 @@ class MediaNodeView extends SelectionBasedNodeView {
           url: url,
           mediaProvider: mediaProvider,
           contextIdentifierProvider: contextIdentifierProvider,
-          mediaOptions: mediaOptions
+          mediaOptions: mediaOptions,
+          onExternalImageLoaded: this.onExternalImageLoaded
         });
       };
     });

package/dist/es2019/toolbar/index.js

@@ -295,18 +295,18 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
           const maxWidth = maxWidthForNestedNode || akEditorFullWidthLayoutWidth;
           const isVideoFile = isVideo(selectedMediaNode.attrs.__fileMimeType);
           const minWidth = calcMinWidth(isVideoFile, maxWidthForNestedNode || contentWidth);
-          const isLegacy = widthType !== 'pixel';
+          const hasPixelType = widthType === 'pixel';
           const pixelWidthFromElement = getPixelWidthOfElement(editorView, selectedMediaSingleNode.pos + 1,
           // get pos of media node
           mediaWidth || DEFAULT_IMAGE_WIDTH);
-          const pixelWidth = isLegacy ? pixelWidthFromElement : mediaSingleWidth;
+          const pixelWidth = hasPixelType ? mediaSingleWidth : pixelWidthFromElement;
 
           //hasParentNode will return falsey value if selection depth === 0
           const isNested = hasParentNode(n => n.type !== state.schema.nodes.doc)(state.selection);
           return /*#__PURE__*/React.createElement(PixelEntry, {
             intl: intl,
             width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
-            showMigration: !pluginState.isResizing && isLegacy,
+            showMigration: !pluginState.isResizing && !hasPixelType,
             mediaWidth: mediaWidth || DEFAULT_IMAGE_WIDTH,
             mediaHeight: mediaHeight || DEFAULT_IMAGE_HEIGHT,
             minWidth: minWidth,

package/dist/es2019/toolbar/utils.js

@@ -1,3 +1,4 @@
+import memoizeOne from 'memoize-one';
 import { wrappedLayouts } from '@atlaskit/editor-common/media-single';
 import { findParentNodeOfType, findSelectedNodeOfType, removeParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
@@ -49,13 +50,13 @@ export const getSelectedMediaSingle = state => {
   } = state.schema.nodes;
   return findSelectedNodeOfType(mediaSingle)(state.selection) || findParentNodeOfType(mediaSingle)(state.selection);
 };
-export const getPixelWidthOfElement = (editorView, pos, mediaWidth) => {
+export const getPixelWidthOfElement = memoizeOne((editorView, pos, mediaWidth) => {
   const domNode = editorView.nodeDOM(pos);
   if (domNode instanceof HTMLElement) {
     return domNode.offsetWidth;
   }
   return mediaWidth;
-};
+});
 export const calcNewLayout = (width, layout, contentWidth, fullWidthMode = false, isNested = false) => {
   const isWrappedLayout = wrappedLayouts.indexOf(layout) > -1;
 

package/dist/es2019/utils/media-single.js

@@ -1,3 +1,4 @@
+import memoizeOne from 'memoize-one';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { safeInsert, shouldSplitSelectedNodeOnNodeInsertion } from '@atlaskit/editor-common/insert';
 import { getMaxWidthForNestedNodeNext, getMediaSingleInitialWidth, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
@@ -173,4 +174,6 @@ export function isCaptionNode(editorView) {
   }
   return false;
 }
-export const isVideo = fileType => !!fileType && fileType.includes('video');
+export const isVideo = memoizeOne(fileType => {
+  return !!fileType && fileType.includes('video');
+});

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

@@ -1,3 +1,4 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -6,6 +7,9 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["width", "height"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 import React from 'react';
@@ -14,6 +18,7 @@ import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-comm
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
 import { getAttrsFromUrl } from '@atlaskit/media-client';
+import { updateCurrentMediaNodeAttrs } from '../../commands/helpers';
 import { isMediaBlobUrlFromAttrs } from '../../utils/media-common';
 import MediaNode from './media';
 var MediaNodeWithProviders = function MediaNodeWithProviders(_ref) {
@@ -39,6 +44,22 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     _defineProperty(_assertThisInitialized(_this), "isSelected", false);
+    _defineProperty(_assertThisInitialized(_this), "onExternalImageLoaded", function (dimensions) {
+      var getPos = _this.getPos;
+      var _this$getAttrs = _this.getAttrs(),
+        width = _this$getAttrs.width,
+        height = _this$getAttrs.height,
+        rest = _objectWithoutProperties(_this$getAttrs, _excluded);
+      if (!width || !height) {
+        updateCurrentMediaNodeAttrs(_objectSpread(_objectSpread({}, rest), {}, {
+          width: width || dimensions.width,
+          height: height || dimensions.height
+        }), {
+          node: _this.node,
+          getPos: getPos
+        })(_this.view.state, _this.view.dispatch);
+      }
+    });
     _defineProperty(_assertThisInitialized(_this), "renderMediaNodeWithState", function (mediaProvider, contextIdentifierProvider) {
       return function (_ref2) {
         var editorWidth = _ref2.width;
@@ -79,7 +100,8 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
           url: url,
           mediaProvider: mediaProvider,
           contextIdentifierProvider: contextIdentifierProvider,
-          mediaOptions: mediaOptions
+          mediaOptions: mediaOptions,
+          onExternalImageLoaded: _this.onExternalImageLoaded
         });
       };
     });

package/dist/esm/toolbar/index.js

@@ -282,11 +282,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           var maxWidth = maxWidthForNestedNode || akEditorFullWidthLayoutWidth;
           var isVideoFile = isVideo(selectedMediaNode.attrs.__fileMimeType);
           var minWidth = calcMinWidth(isVideoFile, maxWidthForNestedNode || contentWidth);
-          var isLegacy = widthType !== 'pixel';
+          var hasPixelType = widthType === 'pixel';
           var pixelWidthFromElement = getPixelWidthOfElement(editorView, selectedMediaSingleNode.pos + 1,
           // get pos of media node
           mediaWidth || DEFAULT_IMAGE_WIDTH);
-          var pixelWidth = isLegacy ? pixelWidthFromElement : mediaSingleWidth;
+          var pixelWidth = hasPixelType ? mediaSingleWidth : pixelWidthFromElement;
 
           //hasParentNode will return falsey value if selection depth === 0
           var isNested = hasParentNode(function (n) {
@@ -295,7 +295,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           return /*#__PURE__*/React.createElement(PixelEntry, {
             intl: intl,
             width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
-            showMigration: !pluginState.isResizing && isLegacy,
+            showMigration: !pluginState.isResizing && !hasPixelType,
             mediaWidth: mediaWidth || DEFAULT_IMAGE_WIDTH,
             mediaHeight: mediaHeight || DEFAULT_IMAGE_HEIGHT,
             minWidth: minWidth,

package/dist/esm/toolbar/utils.js

@@ -1,5 +1,6 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+import memoizeOne from 'memoize-one';
 import { wrappedLayouts } from '@atlaskit/editor-common/media-single';
 import { findParentNodeOfType, findSelectedNodeOfType, removeParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
@@ -65,13 +66,13 @@ export var getSelectedMediaSingle = function getSelectedMediaSingle(state) {
   var mediaSingle = state.schema.nodes.mediaSingle;
   return findSelectedNodeOfType(mediaSingle)(state.selection) || findParentNodeOfType(mediaSingle)(state.selection);
 };
-export var getPixelWidthOfElement = function getPixelWidthOfElement(editorView, pos, mediaWidth) {
+export var getPixelWidthOfElement = memoizeOne(function (editorView, pos, mediaWidth) {
   var domNode = editorView.nodeDOM(pos);
   if (domNode instanceof HTMLElement) {
     return domNode.offsetWidth;
   }
   return mediaWidth;
-};
+});
 export var calcNewLayout = function calcNewLayout(width, layout, contentWidth) {
   var fullWidthMode = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   var isNested = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;

package/dist/esm/utils/media-single.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import memoizeOne from 'memoize-one';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { safeInsert, shouldSplitSelectedNodeOnNodeInsertion } from '@atlaskit/editor-common/insert';
 import { getMaxWidthForNestedNodeNext, getMediaSingleInitialWidth, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
@@ -167,6 +168,6 @@ export function isCaptionNode(editorView) {
   }
   return false;
 }
-export var isVideo = function isVideo(fileType) {
+export var isVideo = memoizeOne(function (fileType) {
   return !!fileType && fileType.includes('video');
-};
+});

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

@@ -18,6 +18,10 @@ declare class MediaNodeView extends SelectionBasedNodeView<MediaNodeViewProps> {
     stopEvent(event: Event): boolean;
     getAttrs(): MediaADFAttrs;
     isMediaBlobUrl(): boolean;
+    onExternalImageLoaded: (dimensions: {
+        width: number;
+        height: number;
+    }) => void;
     renderMediaNodeWithState: (mediaProvider?: Promise<MediaProvider>, contextIdentifierProvider?: Promise<ContextIdentifierProvider>) => ({ width: editorWidth }: {
         width?: import("@atlaskit/editor-common/types").EditorContainerWidth | undefined;
     }) => JSX.Element;

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

@@ -6,6 +6,6 @@ export declare const getSelectedMediaContainerNodeAttrs: (mediaPluginState: Medi
 export declare const downloadMedia: (mediaPluginState: MediaPluginState) => Promise<boolean>;
 export declare const removeMediaGroupNode: (state: EditorState) => import("prosemirror-state").Transaction;
 export declare const getSelectedMediaSingle: (state: EditorState) => import("prosemirror-utils/dist/types").FindResult;
-export declare const getPixelWidthOfElement: (editorView: EditorView, pos: number, mediaWidth: number) => number;
+export declare const getPixelWidthOfElement: import("memoize-one").MemoizedFn<(editorView: EditorView, pos: number, mediaWidth: number) => number>;
 export declare const calcNewLayout: (width: number, layout: RichMediaLayout, contentWidth: number, fullWidthMode?: boolean, isNested?: boolean) => RichMediaLayout;
 export declare const getMaxToolbarWidth: () => number;

package/dist/types/utils/media-single.d.ts

@@ -17,4 +17,4 @@ export declare const insertMediaAsMediaSingle: (view: EditorView, node: PMNode,
 export declare const insertMediaSingleNode: (view: EditorView, mediaState: MediaState, inputMethod?: InputMethodInsertMedia, collection?: string, alignLeftOnInsert?: boolean, newInsertionBehaviour?: boolean, widthPluginState?: WidthPluginState | undefined, editorAnalyticsAPI?: EditorAnalyticsAPI | undefined) => boolean;
 export declare const createMediaSingleNode: (schema: Schema, collection: string, maxWidth?: number, minWidth?: number, alignLeftOnInsert?: boolean) => (mediaState: MediaSingleState) => PMNode;
 export declare function isCaptionNode(editorView: EditorView): boolean;
-export declare const isVideo: (fileType?: string) => boolean;
+export declare const isVideo: import("memoize-one").MemoizedFn<(fileType?: string) => boolean>;

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

@@ -18,6 +18,10 @@ declare class MediaNodeView extends SelectionBasedNodeView<MediaNodeViewProps> {
     stopEvent(event: Event): boolean;
     getAttrs(): MediaADFAttrs;
     isMediaBlobUrl(): boolean;
+    onExternalImageLoaded: (dimensions: {
+        width: number;
+        height: number;
+    }) => void;
     renderMediaNodeWithState: (mediaProvider?: Promise<MediaProvider>, contextIdentifierProvider?: Promise<ContextIdentifierProvider>) => ({ width: editorWidth }: {
         width?: import("@atlaskit/editor-common/types").EditorContainerWidth | undefined;
     }) => JSX.Element;

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

@@ -6,6 +6,6 @@ export declare const getSelectedMediaContainerNodeAttrs: (mediaPluginState: Medi
 export declare const downloadMedia: (mediaPluginState: MediaPluginState) => Promise<boolean>;
 export declare const removeMediaGroupNode: (state: EditorState) => import("prosemirror-state").Transaction;
 export declare const getSelectedMediaSingle: (state: EditorState) => import("prosemirror-utils/dist/types").FindResult;
-export declare const getPixelWidthOfElement: (editorView: EditorView, pos: number, mediaWidth: number) => number;
+export declare const getPixelWidthOfElement: import("memoize-one").MemoizedFn<(editorView: EditorView, pos: number, mediaWidth: number) => number>;
 export declare const calcNewLayout: (width: number, layout: RichMediaLayout, contentWidth: number, fullWidthMode?: boolean, isNested?: boolean) => RichMediaLayout;
 export declare const getMaxToolbarWidth: () => number;

package/dist/types-ts4.5/utils/media-single.d.ts

@@ -17,4 +17,4 @@ export declare const insertMediaAsMediaSingle: (view: EditorView, node: PMNode,
 export declare const insertMediaSingleNode: (view: EditorView, mediaState: MediaState, inputMethod?: InputMethodInsertMedia, collection?: string, alignLeftOnInsert?: boolean, newInsertionBehaviour?: boolean, widthPluginState?: WidthPluginState | undefined, editorAnalyticsAPI?: EditorAnalyticsAPI | undefined) => boolean;
 export declare const createMediaSingleNode: (schema: Schema, collection: string, maxWidth?: number, minWidth?: number, alignLeftOnInsert?: boolean) => (mediaState: MediaSingleState) => PMNode;
 export declare function isCaptionNode(editorView: EditorView): boolean;
-export declare const isVideo: (fileType?: string) => boolean;
+export declare const isVideo: import("memoize-one").MemoizedFn<(fileType?: string) => boolean>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-media",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "description": "Media plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -35,14 +35,14 @@
     "@atlaskit/adf-schema": "^32.0.0",
     "@atlaskit/analytics-namespaced-context": "^6.7.0",
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/button": "^16.10.0",
-    "@atlaskit/editor-common": "^76.11.0",
+    "@atlaskit/button": "^16.11.0",
+    "@atlaskit/editor-common": "^76.14.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.2.0",
     "@atlaskit/editor-plugin-decorations": "^0.2.0",
     "@atlaskit/editor-plugin-editor-disabled": "^0.2.0",
     "@atlaskit/editor-plugin-feature-flags": "^1.0.0",
-    "@atlaskit/editor-plugin-floating-toolbar": "^0.6.0",
+    "@atlaskit/editor-plugin-floating-toolbar": "^0.7.0",
     "@atlaskit/editor-plugin-focus": "^0.2.0",
     "@atlaskit/editor-plugin-grid": "^0.3.0",
     "@atlaskit/editor-plugin-guideline": "^0.5.0",
@@ -52,7 +52,7 @@
     "@atlaskit/editor-tables": "^2.3.0",
     "@atlaskit/form": "^8.11.0",
     "@atlaskit/icon": "^21.12.0",
-    "@atlaskit/media-card": "^77.1.0",
+    "@atlaskit/media-card": "^77.2.0",
     "@atlaskit/media-client": "^24.0.0",
     "@atlaskit/media-common": "^9.0.0",
     "@atlaskit/media-filmstrip": "^47.0.0",
@@ -62,7 +62,7 @@
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/textfield": "^5.6.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.27.0",
+    "@atlaskit/tokens": "^1.28.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",