@atlaskit/editor-core 187.28.1 → 187.28.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-core
 
+## 187.28.3
+
+### Patch Changes
+
+- [`6cced3b0ed6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6cced3b0ed6) - Warn if the emoji provider prop for the Editor is changing too quickly as it will cause performance issues.
+
+## 187.28.2
+
+### Patch Changes
+
+- [`a3c9fd814c5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a3c9fd814c5) - Set minimum width for media single node of video type (when first inserted and when resizing)
+
 ## 187.28.1
 
 ### Patch Changes

package/dist/cjs/plugins/emoji/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ACTIONS = void 0;
 exports.createEmojiPlugin = createEmojiPlugin;
+exports.createRateLimitReachedFunction = createRateLimitReachedFunction;
 exports.emojiToTypeaheadItem = exports.emojiPluginKey = exports.emojiPlugin = exports.defaultListLimit = void 0;
 exports.getEmojiPluginState = getEmojiPluginState;
 exports.memoize = memoize;
@@ -268,7 +269,44 @@ var setAsciiMap = function setAsciiMap(asciiMap) {
     return true;
   };
 };
-var setProvider = function setProvider(provider) {
+
+/**
+ *
+ * Wrapper to call `onLimitReached` when a specified number of calls of that function
+ * have been made within a time period.
+ *
+ * Note: It does not rate limit
+ *
+ * @param fn Function to wrap
+ * @param limitTime Time limit in milliseconds
+ * @param limitCount Number of function calls before `onRateReached` is called (per time period)
+ * @returns Wrapped function
+ */
+function createRateLimitReachedFunction(fn, limitTime, limitCount, onLimitReached) {
+  var lastCallTime = 0;
+  var callCount = 0;
+  return function wrappedFn() {
+    var now = Date.now();
+    if (now - lastCallTime < limitTime) {
+      if (++callCount > limitCount) {
+        onLimitReached === null || onLimitReached === void 0 ? void 0 : onLimitReached();
+      }
+    } else {
+      lastCallTime = now;
+      callCount = 1;
+    }
+    return fn.apply(void 0, arguments);
+  };
+}
+
+// At this stage console.error only
+var logRateWarning = function logRateWarning() {
+  if (process.env.NODE_ENV === 'development') {
+    // eslint-disable-next-line no-console
+    console.error('The emoji provider injected in the Editor is being reloaded frequently, this will cause a slow Editor experience.');
+  }
+};
+var setProvider = createRateLimitReachedFunction(function (provider) {
   return function (state, dispatch) {
     if (dispatch) {
       dispatch(state.tr.setMeta(emojiPluginKey, {
@@ -280,7 +318,11 @@ var setProvider = function setProvider(provider) {
     }
     return true;
   };
-};
+},
+// If we change the emoji provider more than three times every 5 seconds we should warn.
+// This seems like a really long time but the performance can be that laggy that we don't
+// even get 3 events in 3 seconds and miss this indicator.
+5000, 3, logRateWarning);
 exports.setProvider = setProvider;
 var emojiPluginKey = new _state.PluginKey('emojiPlugin');
 exports.emojiPluginKey = emojiPluginKey;
@@ -335,15 +377,18 @@ function createEmojiPlugin(pmPluginFactoryParams) {
         switch (name) {
           case 'emojiProvider':
             if (!providerPromise) {
-              return setProvider(undefined)(editorView.state, editorView.dispatch);
+              var _setProvider;
+              return setProvider === null || setProvider === void 0 ? void 0 : (_setProvider = setProvider(undefined)) === null || _setProvider === void 0 ? void 0 : _setProvider(editorView.state, editorView.dispatch);
             }
             providerPromise.then(function (provider) {
-              setProvider(provider)(editorView.state, editorView.dispatch);
+              var _setProvider2;
+              setProvider === null || setProvider === void 0 ? void 0 : (_setProvider2 = setProvider(provider)) === null || _setProvider2 === void 0 ? void 0 : _setProvider2(editorView.state, editorView.dispatch);
               provider.getAsciiMap().then(function (asciiMap) {
                 setAsciiMap(asciiMap)(editorView.state, editorView.dispatch);
               });
             }).catch(function () {
-              return setProvider(undefined)(editorView.state, editorView.dispatch);
+              var _setProvider3;
+              return setProvider === null || setProvider === void 0 ? void 0 : (_setProvider3 = setProvider(undefined)) === null || _setProvider3 === void 0 ? void 0 : _setProvider3(editorView.state, editorView.dispatch);
             });
             break;
         }

package/dist/cjs/plugins/media/toolbar/index.js

@@ -303,7 +303,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
             mediaWidth: mediaWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH,
             mediaHeight: mediaHeight || _mediaSingle.DEFAULT_IMAGE_HEIGHT,
             validate: function validate(value) {
-              if (value !== '' && !isNaN(value) && value >= _mediaSingle.MEDIA_SINGLE_MIN_PIXEL_WIDTH && value <= _editorSharedStyles.akEditorFullWidthLayoutWidth) {
+              if (value !== '' && !isNaN(value) && value >= _mediaSingle.MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH && value <= _editorSharedStyles.akEditorFullWidthLayoutWidth) {
                 return true;
               }
               return false;

package/dist/cjs/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -149,6 +149,9 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       }
       return (0, _mediaSingle.calcMediaSingleMaxWidth)(containerWidth);
     }));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcMinWidth", (0, _memoizeOne.default)(function (isVideoFile, contentWidth) {
+      return Math.min(contentWidth || _editorSharedStyles.akEditorDefaultLayoutWidth, isVideoFile ? _mediaSingle.MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : _mediaSingle.MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH);
+    }));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getRelativeGuides", function () {
       var $pos = _this.$pos;
       var relativeGuides = $pos && $pos.nodeAfter && _this.state.size.width ? (0, _guideline.getRelativeGuidelines)(_this.state.relativeGuides, {
@@ -492,7 +495,8 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         lineLength = _this$props8.lineLength;
       var _this$state = this.state,
         isResizing = _this$state.isResizing,
-        size = _this$state.size;
+        size = _this$state.size,
+        isVideoFile = _this$state.isVideoFile;
       var enable = {};
       _ui.handleSides.forEach(function (side) {
         var oppositeSide = side === 'left' ? 'right' : 'left';
@@ -510,6 +514,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       });
       var resizerNextClassName = (0, _classnames.default)(className, _styles.resizerStyles);
       var maxWidth = this.calcMaxWidth(lineLength, containerWidth, fullWidthMode);
+      var minWidth = this.calcMinWidth(isVideoFile, lineLength);
       return (0, _react2.jsx)("div", {
         ref: this.saveWrapper,
         css: (0, _styled.wrapperStyle)({
@@ -522,7 +527,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
           isExtendedResizeExperienceOn: true
         })
       }, (0, _react2.jsx)(_resizer.ResizerNext, {
-        minWidth: _mediaSingle.MEDIA_SINGLE_MIN_PIXEL_WIDTH,
+        minWidth: minWidth,
         maxWidth: maxWidth,
         className: resizerNextClassName,
         snapGap: _mediaSingle.MEDIA_SINGLE_SNAP_GAP,

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

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.insertMediaSingleNode = exports.insertMediaAsMediaSingle = exports.getParentWidthForNestedMediaSingleNode = exports.createMediaSingleNode = void 0;
 exports.isCaptionNode = isCaptionNode;
-exports.isMediaSingle = void 0;
+exports.isVideo = exports.isMediaSingle = void 0;
 exports.transformSliceForMedia = transformSliceForMedia;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _utils2 = require("../../../utils");
-var _utils3 = require("@atlaskit/editor-common/utils");
 var _mediaSingle = require("@atlaskit/editor-common/media-single");
+var _utils3 = require("@atlaskit/editor-common/utils");
 var _mediaCommon = require("../utils/media-common");
 var _slice = require("../../../utils/slice");
 var _analytics = require("@atlaskit/editor-common/analytics");
@@ -104,9 +104,7 @@ var insertMediaSingleNode = function insertMediaSingleNode(view, mediaState, inp
   // add undefined as fallback as we don't want media single width to have upper limit as 0
   // if widthPluginState.width is 0, default 760 will be used
   var contentWidth = (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.lineLength) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.width) || undefined;
-  var node = createMediaSingleNode(state.schema, collection, contentWidth,
-  // pass undefined to use default min width
-  undefined, alignLeftOnInsert)(mediaState);
+  var node = createMediaSingleNode(state.schema, collection, contentWidth, mediaState.status !== 'error' && isVideo(mediaState.fileMimeType) ? _mediaSingle.MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : _mediaSingle.MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, alignLeftOnInsert)(mediaState);
   var fileExtension;
   if (mediaState.fileName) {
     var extensionIdx = mediaState.fileName.lastIndexOf('.');
@@ -224,6 +222,10 @@ function isCaptionNode(editorView) {
   }
   return false;
 }
+var isVideo = function isVideo(fileType) {
+  return !!fileType && fileType.includes('video');
+};
+exports.isVideo = isVideo;
 var getParentWidthForNestedMediaSingleNode = function getParentWidthForNestedMediaSingleNode(resolvedPos, view) {
   var domNode = view.nodeDOM(resolvedPos.pos);
   if (resolvedPos.nodeAfter && _utils3.floatingLayouts.includes(resolvedPos.nodeAfter.attrs.layout) && domNode && domNode.parentElement) {

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "187.28.1";
+var version = "187.28.3";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/es2019/plugins/emoji/index.js

@@ -241,7 +241,44 @@ const setAsciiMap = asciiMap => (state, dispatch) => {
   }
   return true;
 };
-export const setProvider = provider => (state, dispatch) => {
+
+/**
+ *
+ * Wrapper to call `onLimitReached` when a specified number of calls of that function
+ * have been made within a time period.
+ *
+ * Note: It does not rate limit
+ *
+ * @param fn Function to wrap
+ * @param limitTime Time limit in milliseconds
+ * @param limitCount Number of function calls before `onRateReached` is called (per time period)
+ * @returns Wrapped function
+ */
+export function createRateLimitReachedFunction(fn, limitTime, limitCount, onLimitReached) {
+  let lastCallTime = 0;
+  let callCount = 0;
+  return function wrappedFn(...args) {
+    const now = Date.now();
+    if (now - lastCallTime < limitTime) {
+      if (++callCount > limitCount) {
+        onLimitReached === null || onLimitReached === void 0 ? void 0 : onLimitReached();
+      }
+    } else {
+      lastCallTime = now;
+      callCount = 1;
+    }
+    return fn(...args);
+  };
+}
+
+// At this stage console.error only
+const logRateWarning = () => {
+  if (process.env.NODE_ENV === 'development') {
+    // eslint-disable-next-line no-console
+    console.error('The emoji provider injected in the Editor is being reloaded frequently, this will cause a slow Editor experience.');
+  }
+};
+export const setProvider = createRateLimitReachedFunction(provider => (state, dispatch) => {
   if (dispatch) {
     dispatch(state.tr.setMeta(emojiPluginKey, {
       action: ACTIONS.SET_PROVIDER,
@@ -251,7 +288,11 @@ export const setProvider = provider => (state, dispatch) => {
     }));
   }
   return true;
-};
+},
+// If we change the emoji provider more than three times every 5 seconds we should warn.
+// This seems like a really long time but the performance can be that laggy that we don't
+// even get 3 events in 3 seconds and miss this indicator.
+5000, 3, logRateWarning);
 export const emojiPluginKey = new PluginKey('emojiPlugin');
 export function getEmojiPluginState(state) {
   return emojiPluginKey.getState(state) || {};
@@ -307,14 +348,19 @@ export function createEmojiPlugin(pmPluginFactoryParams) {
         switch (name) {
           case 'emojiProvider':
             if (!providerPromise) {
-              return setProvider(undefined)(editorView.state, editorView.dispatch);
+              var _setProvider;
+              return setProvider === null || setProvider === void 0 ? void 0 : (_setProvider = setProvider(undefined)) === null || _setProvider === void 0 ? void 0 : _setProvider(editorView.state, editorView.dispatch);
             }
             providerPromise.then(provider => {
-              setProvider(provider)(editorView.state, editorView.dispatch);
+              var _setProvider2;
+              setProvider === null || setProvider === void 0 ? void 0 : (_setProvider2 = setProvider(provider)) === null || _setProvider2 === void 0 ? void 0 : _setProvider2(editorView.state, editorView.dispatch);
               provider.getAsciiMap().then(asciiMap => {
                 setAsciiMap(asciiMap)(editorView.state, editorView.dispatch);
               });
-            }).catch(() => setProvider(undefined)(editorView.state, editorView.dispatch));
+            }).catch(() => {
+              var _setProvider3;
+              return setProvider === null || setProvider === void 0 ? void 0 : (_setProvider3 = setProvider(undefined)) === null || _setProvider3 === void 0 ? void 0 : _setProvider3(editorView.state, editorView.dispatch);
+            });
             break;
         }
         return;

package/dist/es2019/plugins/media/toolbar/index.js

@@ -25,7 +25,7 @@ import ImageBorderItem from '../ui/ImageBorder';
 import { currentMediaNodeBorderMark } from '../utils/current-media-node';
 import { shouldShowImageBorder } from './imageBorder';
 import { PixelEntry } from '../ui/PixelEntry';
-import { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_GUTTER_SIZE, calcMediaSinglePixelWidth } from '@atlaskit/editor-common/media-single';
+import { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_GUTTER_SIZE, calcMediaSinglePixelWidth } from '@atlaskit/editor-common/media-single';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 const remove = (state, dispatch) => {
   if (dispatch) {
@@ -308,7 +308,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
             mediaWidth: mediaWidth || DEFAULT_IMAGE_WIDTH,
             mediaHeight: mediaHeight || DEFAULT_IMAGE_HEIGHT,
             validate: value => {
-              if (value !== '' && !isNaN(value) && value >= MEDIA_SINGLE_MIN_PIXEL_WIDTH && value <= akEditorFullWidthLayoutWidth) {
+              if (value !== '' && !isNaN(value) && value >= MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH && value <= akEditorFullWidthLayoutWidth) {
                 return true;
               }
               return false;

package/dist/es2019/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -6,12 +6,12 @@ import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from '@atlaskit
 import { getMediaClient } from '@atlaskit/media-client';
 import { calcPctFromPx, wrappedLayouts, handleSides, imageAlignmentMap } from '@atlaskit/editor-common/ui';
 import { nonWrappedLayouts, setNodeSelection } from '@atlaskit/editor-common/utils';
-import { akEditorFullWidthLayoutWidth, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
+import { akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { wrapperStyle } from './styled';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import classnames from 'classnames';
 import { richMediaClassName, resizerStyles } from '@atlaskit/editor-common/styles';
-import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, calculateOffsetLeft, DEFAULT_IMAGE_WIDTH, calcMediaSingleMaxWidth } from '@atlaskit/editor-common/media-single';
+import { MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, calculateOffsetLeft, DEFAULT_IMAGE_WIDTH, calcMediaSingleMaxWidth } from '@atlaskit/editor-common/media-single';
 import { findClosestSnap, getGuidelinesWithHighlights, generateDefaultGuidelines, generateDynamicGuidelines, getGuidelineSnaps, getGuidelineTypeFromKey, getRelativeGuideSnaps, getRelativeGuidelines } from '@atlaskit/editor-common/guideline';
 import memoizeOne from 'memoize-one';
 import { getMediaResizeAnalyticsEvent } from '../../utils/analytics';
@@ -132,6 +132,9 @@ class ResizableMediaSingleNext extends React.Component {
       }
       return calcMediaSingleMaxWidth(containerWidth);
     }));
+    _defineProperty(this, "calcMinWidth", memoizeOne((isVideoFile, contentWidth) => {
+      return Math.min(contentWidth || akEditorDefaultLayoutWidth, isVideoFile ? MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH);
+    }));
     _defineProperty(this, "getRelativeGuides", () => {
       const $pos = this.$pos;
       const relativeGuides = $pos && $pos.nodeAfter && this.state.size.width ? getRelativeGuidelines(this.state.relativeGuides, {
@@ -411,7 +414,8 @@ class ResizableMediaSingleNext extends React.Component {
     } = this.props;
     const {
       isResizing,
-      size
+      size,
+      isVideoFile
     } = this.state;
     const enable = {};
     handleSides.forEach(side => {
@@ -430,6 +434,7 @@ class ResizableMediaSingleNext extends React.Component {
     });
     const resizerNextClassName = classnames(className, resizerStyles);
     const maxWidth = this.calcMaxWidth(lineLength, containerWidth, fullWidthMode);
+    const minWidth = this.calcMinWidth(isVideoFile, lineLength);
     return jsx("div", {
       ref: this.saveWrapper,
       css: wrapperStyle({
@@ -442,7 +447,7 @@ class ResizableMediaSingleNext extends React.Component {
         isExtendedResizeExperienceOn: true
       })
     }, jsx(ResizerNext, {
-      minWidth: MEDIA_SINGLE_MIN_PIXEL_WIDTH,
+      minWidth: minWidth,
       maxWidth: maxWidth,
       className: resizerNextClassName,
       snapGap: MEDIA_SINGLE_SNAP_GAP,

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

@@ -1,8 +1,8 @@
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { safeInsert as pmSafeInsert, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { checkNodeDown } from '../../../utils';
+import { getMediaSingleInitialWidth, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
 import { isEmptyParagraph, floatingLayouts } from '@atlaskit/editor-common/utils';
-import { getMediaSingleInitialWidth } from '@atlaskit/editor-common/media-single';
 import { copyOptionalAttrsFromMediaState } from '../utils/media-common';
 import { mapSlice } from '../../../utils/slice';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
@@ -94,9 +94,7 @@ export const insertMediaSingleNode = (view, mediaState, inputMethod, collection,
   // add undefined as fallback as we don't want media single width to have upper limit as 0
   // if widthPluginState.width is 0, default 760 will be used
   const contentWidth = (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.lineLength) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.width) || undefined;
-  const node = createMediaSingleNode(state.schema, collection, contentWidth,
-  // pass undefined to use default min width
-  undefined, alignLeftOnInsert)(mediaState);
+  const node = createMediaSingleNode(state.schema, collection, contentWidth, mediaState.status !== 'error' && isVideo(mediaState.fileMimeType) ? MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, alignLeftOnInsert)(mediaState);
   let fileExtension;
   if (mediaState.fileName) {
     const extensionIdx = mediaState.fileName.lastIndexOf('.');
@@ -219,6 +217,7 @@ export function isCaptionNode(editorView) {
   }
   return false;
 }
+export const isVideo = fileType => !!fileType && fileType.includes('video');
 export const getParentWidthForNestedMediaSingleNode = (resolvedPos, view) => {
   const domNode = view.nodeDOM(resolvedPos.pos);
   if (resolvedPos.nodeAfter && floatingLayouts.includes(resolvedPos.nodeAfter.attrs.layout) && domNode && domNode.parentElement) {

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "187.28.1";
+export const version = "187.28.3";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/esm/plugins/emoji/index.js

@@ -253,7 +253,44 @@ var setAsciiMap = function setAsciiMap(asciiMap) {
     return true;
   };
 };
-export var setProvider = function setProvider(provider) {
+
+/**
+ *
+ * Wrapper to call `onLimitReached` when a specified number of calls of that function
+ * have been made within a time period.
+ *
+ * Note: It does not rate limit
+ *
+ * @param fn Function to wrap
+ * @param limitTime Time limit in milliseconds
+ * @param limitCount Number of function calls before `onRateReached` is called (per time period)
+ * @returns Wrapped function
+ */
+export function createRateLimitReachedFunction(fn, limitTime, limitCount, onLimitReached) {
+  var lastCallTime = 0;
+  var callCount = 0;
+  return function wrappedFn() {
+    var now = Date.now();
+    if (now - lastCallTime < limitTime) {
+      if (++callCount > limitCount) {
+        onLimitReached === null || onLimitReached === void 0 ? void 0 : onLimitReached();
+      }
+    } else {
+      lastCallTime = now;
+      callCount = 1;
+    }
+    return fn.apply(void 0, arguments);
+  };
+}
+
+// At this stage console.error only
+var logRateWarning = function logRateWarning() {
+  if (process.env.NODE_ENV === 'development') {
+    // eslint-disable-next-line no-console
+    console.error('The emoji provider injected in the Editor is being reloaded frequently, this will cause a slow Editor experience.');
+  }
+};
+export var setProvider = createRateLimitReachedFunction(function (provider) {
   return function (state, dispatch) {
     if (dispatch) {
       dispatch(state.tr.setMeta(emojiPluginKey, {
@@ -265,7 +302,11 @@ export var setProvider = function setProvider(provider) {
     }
     return true;
   };
-};
+},
+// If we change the emoji provider more than three times every 5 seconds we should warn.
+// This seems like a really long time but the performance can be that laggy that we don't
+// even get 3 events in 3 seconds and miss this indicator.
+5000, 3, logRateWarning);
 export var emojiPluginKey = new PluginKey('emojiPlugin');
 export function getEmojiPluginState(state) {
   return emojiPluginKey.getState(state) || {};
@@ -318,15 +359,18 @@ export function createEmojiPlugin(pmPluginFactoryParams) {
         switch (name) {
           case 'emojiProvider':
             if (!providerPromise) {
-              return setProvider(undefined)(editorView.state, editorView.dispatch);
+              var _setProvider;
+              return setProvider === null || setProvider === void 0 ? void 0 : (_setProvider = setProvider(undefined)) === null || _setProvider === void 0 ? void 0 : _setProvider(editorView.state, editorView.dispatch);
             }
             providerPromise.then(function (provider) {
-              setProvider(provider)(editorView.state, editorView.dispatch);
+              var _setProvider2;
+              setProvider === null || setProvider === void 0 ? void 0 : (_setProvider2 = setProvider(provider)) === null || _setProvider2 === void 0 ? void 0 : _setProvider2(editorView.state, editorView.dispatch);
               provider.getAsciiMap().then(function (asciiMap) {
                 setAsciiMap(asciiMap)(editorView.state, editorView.dispatch);
               });
             }).catch(function () {
-              return setProvider(undefined)(editorView.state, editorView.dispatch);
+              var _setProvider3;
+              return setProvider === null || setProvider === void 0 ? void 0 : (_setProvider3 = setProvider(undefined)) === null || _setProvider3 === void 0 ? void 0 : _setProvider3(editorView.state, editorView.dispatch);
             });
             break;
         }

package/dist/esm/plugins/media/toolbar/index.js

@@ -29,7 +29,7 @@ import ImageBorderItem from '../ui/ImageBorder';
 import { currentMediaNodeBorderMark } from '../utils/current-media-node';
 import { shouldShowImageBorder } from './imageBorder';
 import { PixelEntry } from '../ui/PixelEntry';
-import { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_GUTTER_SIZE, calcMediaSinglePixelWidth } from '@atlaskit/editor-common/media-single';
+import { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_GUTTER_SIZE, calcMediaSinglePixelWidth } from '@atlaskit/editor-common/media-single';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 var remove = function remove(state, dispatch) {
   if (dispatch) {
@@ -296,7 +296,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
             mediaWidth: mediaWidth || DEFAULT_IMAGE_WIDTH,
             mediaHeight: mediaHeight || DEFAULT_IMAGE_HEIGHT,
             validate: function validate(value) {
-              if (value !== '' && !isNaN(value) && value >= MEDIA_SINGLE_MIN_PIXEL_WIDTH && value <= akEditorFullWidthLayoutWidth) {
+              if (value !== '' && !isNaN(value) && value >= MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH && value <= akEditorFullWidthLayoutWidth) {
                 return true;
               }
               return false;

package/dist/esm/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -17,12 +17,12 @@ import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from '@atlaskit
 import { getMediaClient } from '@atlaskit/media-client';
 import { calcPctFromPx, wrappedLayouts, handleSides, imageAlignmentMap } from '@atlaskit/editor-common/ui';
 import { nonWrappedLayouts, setNodeSelection } from '@atlaskit/editor-common/utils';
-import { akEditorFullWidthLayoutWidth, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
+import { akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { wrapperStyle } from './styled';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import classnames from 'classnames';
 import { richMediaClassName, resizerStyles } from '@atlaskit/editor-common/styles';
-import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, calculateOffsetLeft, DEFAULT_IMAGE_WIDTH, calcMediaSingleMaxWidth } from '@atlaskit/editor-common/media-single';
+import { MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, calculateOffsetLeft, DEFAULT_IMAGE_WIDTH, calcMediaSingleMaxWidth } from '@atlaskit/editor-common/media-single';
 import { findClosestSnap, getGuidelinesWithHighlights, generateDefaultGuidelines, generateDynamicGuidelines, getGuidelineSnaps, getGuidelineTypeFromKey, getRelativeGuideSnaps, getRelativeGuidelines } from '@atlaskit/editor-common/guideline';
 import memoizeOne from 'memoize-one';
 import { getMediaResizeAnalyticsEvent } from '../../utils/analytics';
@@ -142,6 +142,9 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       }
       return calcMediaSingleMaxWidth(containerWidth);
     }));
+    _defineProperty(_assertThisInitialized(_this), "calcMinWidth", memoizeOne(function (isVideoFile, contentWidth) {
+      return Math.min(contentWidth || akEditorDefaultLayoutWidth, isVideoFile ? MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH);
+    }));
     _defineProperty(_assertThisInitialized(_this), "getRelativeGuides", function () {
       var $pos = _this.$pos;
       var relativeGuides = $pos && $pos.nodeAfter && _this.state.size.width ? getRelativeGuidelines(_this.state.relativeGuides, {
@@ -485,7 +488,8 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         lineLength = _this$props8.lineLength;
       var _this$state = this.state,
         isResizing = _this$state.isResizing,
-        size = _this$state.size;
+        size = _this$state.size,
+        isVideoFile = _this$state.isVideoFile;
       var enable = {};
       handleSides.forEach(function (side) {
         var oppositeSide = side === 'left' ? 'right' : 'left';
@@ -503,6 +507,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       });
       var resizerNextClassName = classnames(className, resizerStyles);
       var maxWidth = this.calcMaxWidth(lineLength, containerWidth, fullWidthMode);
+      var minWidth = this.calcMinWidth(isVideoFile, lineLength);
       return jsx("div", {
         ref: this.saveWrapper,
         css: wrapperStyle({
@@ -515,7 +520,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
           isExtendedResizeExperienceOn: true
         })
       }, jsx(ResizerNext, {
-        minWidth: MEDIA_SINGLE_MIN_PIXEL_WIDTH,
+        minWidth: minWidth,
         maxWidth: maxWidth,
         className: resizerNextClassName,
         snapGap: MEDIA_SINGLE_SNAP_GAP,

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

@@ -4,8 +4,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { safeInsert as pmSafeInsert, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { checkNodeDown } from '../../../utils';
+import { getMediaSingleInitialWidth, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
 import { isEmptyParagraph, floatingLayouts } from '@atlaskit/editor-common/utils';
-import { getMediaSingleInitialWidth } from '@atlaskit/editor-common/media-single';
 import { copyOptionalAttrsFromMediaState } from '../utils/media-common';
 import { mapSlice } from '../../../utils/slice';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
@@ -92,9 +92,7 @@ export var insertMediaSingleNode = function insertMediaSingleNode(view, mediaSta
   // add undefined as fallback as we don't want media single width to have upper limit as 0
   // if widthPluginState.width is 0, default 760 will be used
   var contentWidth = (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.lineLength) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.width) || undefined;
-  var node = createMediaSingleNode(state.schema, collection, contentWidth,
-  // pass undefined to use default min width
-  undefined, alignLeftOnInsert)(mediaState);
+  var node = createMediaSingleNode(state.schema, collection, contentWidth, mediaState.status !== 'error' && isVideo(mediaState.fileMimeType) ? MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, alignLeftOnInsert)(mediaState);
   var fileExtension;
   if (mediaState.fileName) {
     var extensionIdx = mediaState.fileName.lastIndexOf('.');
@@ -210,6 +208,9 @@ export function isCaptionNode(editorView) {
   }
   return false;
 }
+export var isVideo = function isVideo(fileType) {
+  return !!fileType && fileType.includes('video');
+};
 export var getParentWidthForNestedMediaSingleNode = function getParentWidthForNestedMediaSingleNode(resolvedPos, view) {
   var domNode = view.nodeDOM(resolvedPos.pos);
   if (resolvedPos.nodeAfter && floatingLayouts.includes(resolvedPos.nodeAfter.attrs.layout) && domNode && domNode.parentElement) {

package/dist/esm/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/editor-core";
-export var version = "187.28.1";
+export var version = "187.28.3";
 export var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/types/plugins/emoji/index.d.ts

@@ -31,7 +31,20 @@ export declare const ACTIONS: {
     SET_RESULTS: string;
     SET_ASCII_MAP: string;
 };
-export declare const setProvider: (provider?: EmojiProvider) => Command;
+/**
+ *
+ * Wrapper to call `onLimitReached` when a specified number of calls of that function
+ * have been made within a time period.
+ *
+ * Note: It does not rate limit
+ *
+ * @param fn Function to wrap
+ * @param limitTime Time limit in milliseconds
+ * @param limitCount Number of function calls before `onRateReached` is called (per time period)
+ * @returns Wrapped function
+ */
+export declare function createRateLimitReachedFunction<LimitedFunction extends (...args: any[]) => any>(fn: Function, limitTime: number, limitCount: number, onLimitReached: () => void): (...args: Parameters<LimitedFunction>) => ReturnType<LimitedFunction> | undefined;
+export declare const setProvider: ((provider?: EmojiProvider) => Command) | undefined;
 export declare const emojiPluginKey: PluginKey<EmojiPluginState>;
 export declare function getEmojiPluginState(state: EditorState): EmojiPluginState;
 export declare function createEmojiPlugin(pmPluginFactoryParams: PMPluginFactoryParams): SafePlugin<EmojiPluginState>;

package/dist/types/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.d.ts

@@ -46,6 +46,7 @@ declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSin
     private setIsResizing;
     private updateSizeInPluginState;
     private calcMaxWidth;
+    private calcMinWidth;
     private getRelativeGuides;
     updateActiveGuidelines: (width: number | undefined, guidelines: GuidelineConfig[], guidelineSnapsReference: GuidelineSnapsReference) => void;
     calculateSizeState: (size: Position & Dimensions, delta: Dimensions, onResizeStop?: boolean) => {

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

@@ -19,4 +19,5 @@ export declare const insertMediaSingleNode: (view: EditorView, mediaState: Media
 export declare const createMediaSingleNode: (schema: Schema, collection: string, maxWidth?: number, minWidth?: number, alignLeftOnInsert?: boolean) => (mediaState: MediaSingleState) => PMNode;
 export declare function transformSliceForMedia(slice: Slice, schema: Schema): (selection: Selection) => Slice;
 export declare function isCaptionNode(editorView: EditorView): boolean;
+export declare const isVideo: (fileType?: string) => boolean;
 export declare const getParentWidthForNestedMediaSingleNode: (resolvedPos: ResolvedPos, view: EditorView) => number | null;

package/dist/types-ts4.5/plugins/emoji/index.d.ts

@@ -34,7 +34,20 @@ export declare const ACTIONS: {
     SET_RESULTS: string;
     SET_ASCII_MAP: string;
 };
-export declare const setProvider: (provider?: EmojiProvider) => Command;
+/**
+ *
+ * Wrapper to call `onLimitReached` when a specified number of calls of that function
+ * have been made within a time period.
+ *
+ * Note: It does not rate limit
+ *
+ * @param fn Function to wrap
+ * @param limitTime Time limit in milliseconds
+ * @param limitCount Number of function calls before `onRateReached` is called (per time period)
+ * @returns Wrapped function
+ */
+export declare function createRateLimitReachedFunction<LimitedFunction extends (...args: any[]) => any>(fn: Function, limitTime: number, limitCount: number, onLimitReached: () => void): (...args: Parameters<LimitedFunction>) => ReturnType<LimitedFunction> | undefined;
+export declare const setProvider: ((provider?: EmojiProvider) => Command) | undefined;
 export declare const emojiPluginKey: PluginKey<EmojiPluginState>;
 export declare function getEmojiPluginState(state: EditorState): EmojiPluginState;
 export declare function createEmojiPlugin(pmPluginFactoryParams: PMPluginFactoryParams): SafePlugin<EmojiPluginState>;

package/dist/types-ts4.5/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.d.ts

@@ -46,6 +46,7 @@ declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSin
     private setIsResizing;
     private updateSizeInPluginState;
     private calcMaxWidth;
+    private calcMinWidth;
     private getRelativeGuides;
     updateActiveGuidelines: (width: number | undefined, guidelines: GuidelineConfig[], guidelineSnapsReference: GuidelineSnapsReference) => void;
     calculateSizeState: (size: Position & Dimensions, delta: Dimensions, onResizeStop?: boolean) => {

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

@@ -19,4 +19,5 @@ export declare const insertMediaSingleNode: (view: EditorView, mediaState: Media
 export declare const createMediaSingleNode: (schema: Schema, collection: string, maxWidth?: number, minWidth?: number, alignLeftOnInsert?: boolean) => (mediaState: MediaSingleState) => PMNode;
 export declare function transformSliceForMedia(slice: Slice, schema: Schema): (selection: Selection) => Slice;
 export declare function isCaptionNode(editorView: EditorView): boolean;
+export declare const isVideo: (fileType?: string) => boolean;
 export declare const getParentWidthForNestedMediaSingleNode: (resolvedPos: ResolvedPos, view: EditorView) => number | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-core",
-  "version": "187.28.1",
+  "version": "187.28.3",
   "description": "A package contains Atlassian editor core functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"