@atlaskit/editor-core 187.5.0 → 187.5.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-core
 
+## 187.5.6
+
+### Patch Changes
+
+- [`6b6ec9afee3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6b6ec9afee3) - [ED-19157] Support setting image width based on editor size for newly inserted images behind feature flag
+
+## 187.5.5
+
+### Patch Changes
+
+- [`01237de37e7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/01237de37e7) - [ED-17901] Update clear button on input to have tabindex and update tests to test for both chrome / firefox and safari
+
 ## 187.5.0
 
 ### Minor Changes

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

@@ -119,7 +119,7 @@ var mediaPlugin = function mediaPlugin() {
             customDropzoneContainer: options && options.customDropzoneContainer,
             customMediaPicker: options && options.customMediaPicker,
             allowResizing: !!(options && options.allowResizing)
-          }, reactContext, getIntl, dispatch, options, featureFlags.newInsertionBehaviour);
+          }, reactContext, getIntl, dispatch, options, featureFlags.newInsertionBehaviour, api);
         }
       }, {
         name: 'mediaKeymap',

package/dist/cjs/plugins/media/pm-plugins/main.js

@@ -68,8 +68,10 @@ var createDropPlaceholder = function createDropPlaceholder(intl, allowDropLine)
 };
 var MEDIA_RESOLVED_STATES = ['ready', 'error', 'cancelled'];
 var MediaPluginStateImplementation = /*#__PURE__*/function () {
-  function MediaPluginStateImplementation(_state, options, mediaOptions, newInsertionBehaviour, _dispatch) {
-    var _this = this;
+  function MediaPluginStateImplementation(_state, options, mediaOptions, newInsertionBehaviour, _dispatch, pluginInjectionApi) {
+    var _this = this,
+      _pluginInjectionApi$d,
+      _pluginInjectionApi$d2;
     (0, _classCallCheck2.default)(this, MediaPluginStateImplementation);
     (0, _defineProperty2.default)(this, "allowsUploads", false);
     (0, _defineProperty2.default)(this, "ignoreLinks", false);
@@ -237,7 +239,7 @@ var MediaPluginStateImplementation = /*#__PURE__*/function () {
         });
       }
       if ((0, _mediaSingle.isMediaSingle)(state.schema, mediaStateWithContext.fileMimeType)) {
-        (0, _mediaSingle.insertMediaSingleNode)(_this.view, mediaStateWithContext, _this.getInputMethod(pickerType), collection, _this.mediaOptions && _this.mediaOptions.alignLeftOnInsert, _this.newInsertionBehaviour);
+        (0, _mediaSingle.insertMediaSingleNode)(_this.view, mediaStateWithContext, _this.getInputMethod(pickerType), collection, _this.mediaOptions && _this.mediaOptions.alignLeftOnInsert, _this.newInsertionBehaviour, _this.widthPluginState);
       } else if ((0, _mediaCommon2.getMediaFeatureFlag)('mediaInline', (_this$mediaOptions2 = _this.mediaOptions) === null || _this$mediaOptions2 === void 0 ? void 0 : _this$mediaOptions2.featureFlags) && !(0, _document.isInEmptyLine)(state) && (!(0, _mediaCommon.isInsidePotentialEmptyParagraph)(state) || (0, _utils2.isInListItem)(state)) && (0, _mediaFiles.canInsertMediaInline)(state)) {
         (0, _mediaFiles.insertMediaInlineNode)(_this.view, mediaStateWithContext, collection, _this.getInputMethod(pickerType));
       } else {
@@ -478,6 +480,7 @@ var MediaPluginStateImplementation = /*#__PURE__*/function () {
     this.mediaOptions = mediaOptions;
     this.newInsertionBehaviour = newInsertionBehaviour;
     this.dispatch = _dispatch;
+    this.widthPluginState = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.width) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.sharedState.currentState();
     this.waitForMediaUpload = options.waitForMediaUpload === undefined ? true : options.waitForMediaUpload;
     var nodes = _state.schema.nodes;
     (0, _assert.default)(nodes.media && (nodes.mediaGroup || nodes.mediaSingle), 'Editor: unable to init media plugin - media or mediaGroup/mediaSingle node absent in schema');
@@ -620,13 +623,13 @@ var getMediaPluginState = function getMediaPluginState(state) {
   return _pluginKey.stateKey.getState(state);
 };
 exports.getMediaPluginState = getMediaPluginState;
-var createPlugin = function createPlugin(_schema, options, reactContext, getIntl, dispatch, mediaOptions, newInsertionBehaviour) {
+var createPlugin = function createPlugin(_schema, options, reactContext, getIntl, dispatch, mediaOptions, newInsertionBehaviour, pluginInjectionApi) {
   var intl = getIntl();
   var dropPlaceholder = createDropPlaceholder(intl, mediaOptions && mediaOptions.allowDropzoneDropLine);
   return new _safePlugin.SafePlugin({
     state: {
       init: function init(_config, state) {
-        return new MediaPluginStateImplementation(state, options, mediaOptions, newInsertionBehaviour, dispatch);
+        return new MediaPluginStateImplementation(state, options, mediaOptions, newInsertionBehaviour, dispatch, pluginInjectionApi);
       },
       apply: function apply(tr, pluginState) {
         // remap editing media single position if we're in collab

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

@@ -13,14 +13,18 @@ var _prosemirrorModel = require("prosemirror-model");
 var _prosemirrorUtils = require("prosemirror-utils");
 var _utils = require("../../../utils");
 var _utils2 = require("@atlaskit/editor-common/utils");
+var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _mediaCommon = require("../utils/media-common");
 var _slice = require("../../../utils/slice");
 var _analytics = require("../../analytics");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _analytics2 = require("@atlaskit/editor-common/analytics");
 var _insert = require("@atlaskit/editor-common/insert");
 var _isImage = require("./is-image");
 var _position = require("../../../utils/prosemirror/position");
 var _mediaCommon2 = require("@atlaskit/media-common");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _ui = require("@atlaskit/editor-common/ui");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var getInsertMediaAnalytics = function getInsertMediaAnalytics(inputMethod, fileExtension) {
@@ -89,7 +93,7 @@ var insertMediaAsMediaSingle = function insertMediaAsMediaSingle(view, node, inp
   return insertNodesWithOptionalParagraph(nodes, analyticsAttributes)(state, dispatch);
 };
 exports.insertMediaAsMediaSingle = insertMediaAsMediaSingle;
-var insertMediaSingleNode = function insertMediaSingleNode(view, mediaState, inputMethod, collection, alignLeftOnInsert, newInsertionBehaviour) {
+var insertMediaSingleNode = function insertMediaSingleNode(view, mediaState, inputMethod, collection, alignLeftOnInsert, newInsertionBehaviour, widthPluginState) {
   var _state$selection$$fro;
   if (collection === undefined) {
     return false;
@@ -98,7 +102,11 @@ var insertMediaSingleNode = function insertMediaSingleNode(view, mediaState, inp
     dispatch = view.dispatch;
   var grandParentNodeType = (_state$selection$$fro = state.selection.$from.node(-1)) === null || _state$selection$$fro === void 0 ? void 0 : _state$selection$$fro.type;
   var parentNodeType = state.selection.$from.parent.type;
-  var node = createMediaSingleNode(state.schema, collection, alignLeftOnInsert)(mediaState);
+
+  // 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, undefined, alignLeftOnInsert)(mediaState);
   var fileExtension;
   if (mediaState.fileName) {
     var extensionIdx = mediaState.fileName.lastIndexOf('.');
@@ -132,7 +140,10 @@ var insertMediaSingleNode = function insertMediaSingleNode(view, mediaState, inp
   return true;
 };
 exports.insertMediaSingleNode = insertMediaSingleNode;
-var createMediaSingleNode = function createMediaSingleNode(schema, collection, alignLeftOnInsert) {
+var createMediaSingleNode = function createMediaSingleNode(schema, collection) {
+  var maxWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _editorSharedStyles.akEditorDefaultLayoutWidth;
+  var minWidth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _mediaSingle.MEDIA_SINGLE_MIN_PIXEL_WIDTH;
+  var alignLeftOnInsert = arguments.length > 4 ? arguments[4] : undefined;
   return function (mediaState) {
     var id = mediaState.id,
       dimensions = mediaState.dimensions,
@@ -148,19 +159,26 @@ var createMediaSingleNode = function createMediaSingleNode(schema, collection, a
     var _schema$nodes = schema.nodes,
       media = _schema$nodes.media,
       mediaSingle = _schema$nodes.mediaSingle;
+    var scaledWidth = width && Math.round(width / scaleFactor);
     var mediaNode = media.create({
       id: id,
       type: 'file',
       collection: collection,
       contextId: contextId,
-      width: width && Math.round(width / scaleFactor),
+      width: scaledWidth,
       height: height && Math.round(height / scaleFactor)
     });
     var mediaSingleAttrs = alignLeftOnInsert ? {
       layout: 'align-start'
     } : {};
+    var extendedMediaSingleAttrs = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') ? _objectSpread(_objectSpread({}, mediaSingleAttrs), {}, {
+      // constrain initial width between max width (editor content width) and min width (default to 24)
+      width: Math.max(Math.min(scaledWidth || _ui.DEFAULT_IMAGE_WIDTH, maxWidth), minWidth),
+      // TODO: change to use enum
+      widthType: 'pixel'
+    }) : mediaSingleAttrs;
     (0, _mediaCommon.copyOptionalAttrsFromMediaState)(mediaState, mediaNode);
-    return mediaSingle.createChecked(mediaSingleAttrs, mediaNode);
+    return mediaSingle.createChecked(extendedMediaSingleAttrs, mediaNode);
   };
 };
 exports.createMediaSingleNode = createMediaSingleNode;

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.5.0";
+var version = "187.5.6";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "187.5.0",
+	"version": "187.5.6",
 	"sideEffects": false
 }

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

@@ -104,7 +104,7 @@ const mediaPlugin = (options = {}, api) => {
             customDropzoneContainer: options && options.customDropzoneContainer,
             customMediaPicker: options && options.customMediaPicker,
             allowResizing: !!(options && options.allowResizing)
-          }, reactContext, getIntl, dispatch, options, featureFlags.newInsertionBehaviour);
+          }, reactContext, getIntl, dispatch, options, featureFlags.newInsertionBehaviour, api);
         }
       }, {
         name: 'mediaKeymap',

package/dist/es2019/plugins/media/nodeviews/mediaSingle.js

@@ -5,7 +5,7 @@ import { jsx } from '@emotion/react';
 import React, { Component } from 'react';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { MediaSingle, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/ui';
-import { browser } from '@atlaskit/editor-common/utils';
+import { browser, floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-common/utils';
 import { isNodeSelectedOrInRange } from '../../../utils/nodes';
 import { setNodeSelection, setTextSelection } from '../../../utils';
 import ResizableMediaSingle from '../ui/ResizableMediaSingle';
@@ -14,7 +14,6 @@ import { MediaNodeUpdater } from './mediaNodeUpdater';
 import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { figureWrapper, MediaSingleNodeSelector } from './styles';
-import { floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-common/utils';
 import { getAttrsFromUrl } from '@atlaskit/media-client';
 import { isMediaBlobUrlFromAttrs } from '../utils/media-common';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';

package/dist/es2019/plugins/media/pm-plugins/main.js

@@ -44,7 +44,8 @@ const createDropPlaceholder = (intl, allowDropLine) => {
 };
 const MEDIA_RESOLVED_STATES = ['ready', 'error', 'cancelled'];
 export class MediaPluginStateImplementation {
-  constructor(_state, options, mediaOptions, newInsertionBehaviour, _dispatch) {
+  constructor(_state, options, mediaOptions, newInsertionBehaviour, _dispatch, pluginInjectionApi) {
+    var _pluginInjectionApi$d, _pluginInjectionApi$d2;
     _defineProperty(this, "allowsUploads", false);
     _defineProperty(this, "ignoreLinks", false);
     _defineProperty(this, "waitForMediaUpload", true);
@@ -168,7 +169,7 @@ export class MediaPluginStateImplementation {
         });
       }
       if (isMediaSingle(state.schema, mediaStateWithContext.fileMimeType)) {
-        insertMediaSingleNode(this.view, mediaStateWithContext, this.getInputMethod(pickerType), collection, this.mediaOptions && this.mediaOptions.alignLeftOnInsert, this.newInsertionBehaviour);
+        insertMediaSingleNode(this.view, mediaStateWithContext, this.getInputMethod(pickerType), collection, this.mediaOptions && this.mediaOptions.alignLeftOnInsert, this.newInsertionBehaviour, this.widthPluginState);
       } else if (getMediaFeatureFlag('mediaInline', (_this$mediaOptions2 = this.mediaOptions) === null || _this$mediaOptions2 === void 0 ? void 0 : _this$mediaOptions2.featureFlags) && !isInEmptyLine(state) && (!isInsidePotentialEmptyParagraph(state) || isInListItem(state)) && canInsertMediaInline(state)) {
         insertMediaInlineNode(this.view, mediaStateWithContext, collection, this.getInputMethod(pickerType));
       } else {
@@ -408,6 +409,7 @@ export class MediaPluginStateImplementation {
     this.mediaOptions = mediaOptions;
     this.newInsertionBehaviour = newInsertionBehaviour;
     this.dispatch = _dispatch;
+    this.widthPluginState = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.width) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.sharedState.currentState();
     this.waitForMediaUpload = options.waitForMediaUpload === undefined ? true : options.waitForMediaUpload;
     const {
       nodes
@@ -509,13 +511,13 @@ export class MediaPluginStateImplementation {
   }
 }
 export const getMediaPluginState = state => stateKey.getState(state);
-export const createPlugin = (_schema, options, reactContext, getIntl, dispatch, mediaOptions, newInsertionBehaviour) => {
+export const createPlugin = (_schema, options, reactContext, getIntl, dispatch, mediaOptions, newInsertionBehaviour, pluginInjectionApi) => {
   const intl = getIntl();
   const dropPlaceholder = createDropPlaceholder(intl, mediaOptions && mediaOptions.allowDropzoneDropLine);
   return new SafePlugin({
     state: {
       init(_config, state) {
-        return new MediaPluginStateImplementation(state, options, mediaOptions, newInsertionBehaviour, dispatch);
+        return new MediaPluginStateImplementation(state, options, mediaOptions, newInsertionBehaviour, dispatch, pluginInjectionApi);
       },
       apply(tr, pluginState) {
         // remap editing media single position if we're in collab

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

@@ -2,14 +2,18 @@ import { Fragment, Slice } from 'prosemirror-model';
 import { safeInsert as pmSafeInsert, hasParentNodeOfType } from 'prosemirror-utils';
 import { checkNodeDown } from '../../../utils';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
+import { MEDIA_SINGLE_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
 import { copyOptionalAttrsFromMediaState } from '../utils/media-common';
 import { mapSlice } from '../../../utils/slice';
 import { addAnalytics } from '../../analytics';
+import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { safeInsert, shouldSplitSelectedNodeOnNodeInsertion } from '@atlaskit/editor-common/insert';
 import { isImage } from './is-image';
 import { atTheBeginningOfBlock } from '../../../utils/prosemirror/position';
 import { getRandomHex } from '@atlaskit/media-common';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/ui';
 const getInsertMediaAnalytics = (inputMethod, fileExtension) => ({
   action: ACTION.INSERTED,
   actionSubject: ACTION_SUBJECT.DOCUMENT,
@@ -78,7 +82,7 @@ export const insertMediaAsMediaSingle = (view, node, inputMethod) => {
   };
   return insertNodesWithOptionalParagraph(nodes, analyticsAttributes)(state, dispatch);
 };
-export const insertMediaSingleNode = (view, mediaState, inputMethod, collection, alignLeftOnInsert, newInsertionBehaviour) => {
+export const insertMediaSingleNode = (view, mediaState, inputMethod, collection, alignLeftOnInsert, newInsertionBehaviour, widthPluginState) => {
   var _state$selection$$fro;
   if (collection === undefined) {
     return false;
@@ -89,7 +93,11 @@ export const insertMediaSingleNode = (view, mediaState, inputMethod, collection,
   } = view;
   const grandParentNodeType = (_state$selection$$fro = state.selection.$from.node(-1)) === null || _state$selection$$fro === void 0 ? void 0 : _state$selection$$fro.type;
   const parentNodeType = state.selection.$from.parent.type;
-  const node = createMediaSingleNode(state.schema, collection, alignLeftOnInsert)(mediaState);
+
+  // 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, undefined, alignLeftOnInsert)(mediaState);
   let fileExtension;
   if (mediaState.fileName) {
     const extensionIdx = mediaState.fileName.lastIndexOf('.');
@@ -122,7 +130,7 @@ export const insertMediaSingleNode = (view, mediaState, inputMethod, collection,
   }
   return true;
 };
-export const createMediaSingleNode = (schema, collection, alignLeftOnInsert) => mediaState => {
+export const createMediaSingleNode = (schema, collection, maxWidth = akEditorDefaultLayoutWidth, minWidth = MEDIA_SINGLE_MIN_PIXEL_WIDTH, alignLeftOnInsert) => mediaState => {
   const {
     id,
     dimensions,
@@ -140,19 +148,27 @@ export const createMediaSingleNode = (schema, collection, alignLeftOnInsert) =>
     media,
     mediaSingle
   } = schema.nodes;
+  const scaledWidth = width && Math.round(width / scaleFactor);
   const mediaNode = media.create({
     id,
     type: 'file',
     collection,
     contextId,
-    width: width && Math.round(width / scaleFactor),
+    width: scaledWidth,
     height: height && Math.round(height / scaleFactor)
   });
   const mediaSingleAttrs = alignLeftOnInsert ? {
     layout: 'align-start'
   } : {};
+  const extendedMediaSingleAttrs = getBooleanFF('platform.editor.media.extended-resize-experience') ? {
+    ...mediaSingleAttrs,
+    // constrain initial width between max width (editor content width) and min width (default to 24)
+    width: Math.max(Math.min(scaledWidth || DEFAULT_IMAGE_WIDTH, maxWidth), minWidth),
+    // TODO: change to use enum
+    widthType: 'pixel'
+  } : mediaSingleAttrs;
   copyOptionalAttrsFromMediaState(mediaState, mediaNode);
-  return mediaSingle.createChecked(mediaSingleAttrs, mediaNode);
+  return mediaSingle.createChecked(extendedMediaSingleAttrs, mediaNode);
 };
 export function transformSliceForMedia(slice, schema) {
   const {

package/dist/es2019/version-wrapper.js

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

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "187.5.0",
+	"version": "187.5.6",
 	"sideEffects": false
 }

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

@@ -106,7 +106,7 @@ var mediaPlugin = function mediaPlugin() {
             customDropzoneContainer: options && options.customDropzoneContainer,
             customMediaPicker: options && options.customMediaPicker,
             allowResizing: !!(options && options.allowResizing)
-          }, reactContext, getIntl, dispatch, options, featureFlags.newInsertionBehaviour);
+          }, reactContext, getIntl, dispatch, options, featureFlags.newInsertionBehaviour, api);
         }
       }, {
         name: 'mediaKeymap',

package/dist/esm/plugins/media/nodeviews/mediaSingle.js

@@ -18,7 +18,7 @@ import { jsx } from '@emotion/react';
 import React, { Component } from 'react';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { MediaSingle, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/ui';
-import { browser } from '@atlaskit/editor-common/utils';
+import { browser, floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-common/utils';
 import { isNodeSelectedOrInRange } from '../../../utils/nodes';
 import { setNodeSelection, setTextSelection } from '../../../utils';
 import ResizableMediaSingle from '../ui/ResizableMediaSingle';
@@ -27,7 +27,6 @@ import { MediaNodeUpdater } from './mediaNodeUpdater';
 import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { figureWrapper, MediaSingleNodeSelector } from './styles';
-import { floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-common/utils';
 import { getAttrsFromUrl } from '@atlaskit/media-client';
 import { isMediaBlobUrlFromAttrs } from '../utils/media-common';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';

package/dist/esm/plugins/media/pm-plugins/main.js

@@ -53,8 +53,10 @@ var createDropPlaceholder = function createDropPlaceholder(intl, allowDropLine)
 };
 var MEDIA_RESOLVED_STATES = ['ready', 'error', 'cancelled'];
 export var MediaPluginStateImplementation = /*#__PURE__*/function () {
-  function MediaPluginStateImplementation(_state, options, mediaOptions, newInsertionBehaviour, _dispatch) {
-    var _this = this;
+  function MediaPluginStateImplementation(_state, options, mediaOptions, newInsertionBehaviour, _dispatch, pluginInjectionApi) {
+    var _this = this,
+      _pluginInjectionApi$d,
+      _pluginInjectionApi$d2;
     _classCallCheck(this, MediaPluginStateImplementation);
     _defineProperty(this, "allowsUploads", false);
     _defineProperty(this, "ignoreLinks", false);
@@ -222,7 +224,7 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
         });
       }
       if (isMediaSingle(state.schema, mediaStateWithContext.fileMimeType)) {
-        insertMediaSingleNode(_this.view, mediaStateWithContext, _this.getInputMethod(pickerType), collection, _this.mediaOptions && _this.mediaOptions.alignLeftOnInsert, _this.newInsertionBehaviour);
+        insertMediaSingleNode(_this.view, mediaStateWithContext, _this.getInputMethod(pickerType), collection, _this.mediaOptions && _this.mediaOptions.alignLeftOnInsert, _this.newInsertionBehaviour, _this.widthPluginState);
       } else if (getMediaFeatureFlag('mediaInline', (_this$mediaOptions2 = _this.mediaOptions) === null || _this$mediaOptions2 === void 0 ? void 0 : _this$mediaOptions2.featureFlags) && !isInEmptyLine(state) && (!isInsidePotentialEmptyParagraph(state) || isInListItem(state)) && canInsertMediaInline(state)) {
         insertMediaInlineNode(_this.view, mediaStateWithContext, collection, _this.getInputMethod(pickerType));
       } else {
@@ -463,6 +465,7 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
     this.mediaOptions = mediaOptions;
     this.newInsertionBehaviour = newInsertionBehaviour;
     this.dispatch = _dispatch;
+    this.widthPluginState = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.width) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.sharedState.currentState();
     this.waitForMediaUpload = options.waitForMediaUpload === undefined ? true : options.waitForMediaUpload;
     var nodes = _state.schema.nodes;
     assert(nodes.media && (nodes.mediaGroup || nodes.mediaSingle), 'Editor: unable to init media plugin - media or mediaGroup/mediaSingle node absent in schema');
@@ -603,13 +606,13 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
 export var getMediaPluginState = function getMediaPluginState(state) {
   return stateKey.getState(state);
 };
-export var createPlugin = function createPlugin(_schema, options, reactContext, getIntl, dispatch, mediaOptions, newInsertionBehaviour) {
+export var createPlugin = function createPlugin(_schema, options, reactContext, getIntl, dispatch, mediaOptions, newInsertionBehaviour, pluginInjectionApi) {
   var intl = getIntl();
   var dropPlaceholder = createDropPlaceholder(intl, mediaOptions && mediaOptions.allowDropzoneDropLine);
   return new SafePlugin({
     state: {
       init: function init(_config, state) {
-        return new MediaPluginStateImplementation(state, options, mediaOptions, newInsertionBehaviour, dispatch);
+        return new MediaPluginStateImplementation(state, options, mediaOptions, newInsertionBehaviour, dispatch, pluginInjectionApi);
       },
       apply: function apply(tr, pluginState) {
         // remap editing media single position if we're in collab

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

@@ -5,14 +5,18 @@ import { Fragment, Slice } from 'prosemirror-model';
 import { safeInsert as pmSafeInsert, hasParentNodeOfType } from 'prosemirror-utils';
 import { checkNodeDown } from '../../../utils';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
+import { MEDIA_SINGLE_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
 import { copyOptionalAttrsFromMediaState } from '../utils/media-common';
 import { mapSlice } from '../../../utils/slice';
 import { addAnalytics } from '../../analytics';
+import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { safeInsert, shouldSplitSelectedNodeOnNodeInsertion } from '@atlaskit/editor-common/insert';
 import { isImage } from './is-image';
 import { atTheBeginningOfBlock } from '../../../utils/prosemirror/position';
 import { getRandomHex } from '@atlaskit/media-common';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/ui';
 var getInsertMediaAnalytics = function getInsertMediaAnalytics(inputMethod, fileExtension) {
   return {
     action: ACTION.INSERTED,
@@ -77,7 +81,7 @@ export var insertMediaAsMediaSingle = function insertMediaAsMediaSingle(view, no
   };
   return insertNodesWithOptionalParagraph(nodes, analyticsAttributes)(state, dispatch);
 };
-export var insertMediaSingleNode = function insertMediaSingleNode(view, mediaState, inputMethod, collection, alignLeftOnInsert, newInsertionBehaviour) {
+export var insertMediaSingleNode = function insertMediaSingleNode(view, mediaState, inputMethod, collection, alignLeftOnInsert, newInsertionBehaviour, widthPluginState) {
   var _state$selection$$fro;
   if (collection === undefined) {
     return false;
@@ -86,7 +90,11 @@ export var insertMediaSingleNode = function insertMediaSingleNode(view, mediaSta
     dispatch = view.dispatch;
   var grandParentNodeType = (_state$selection$$fro = state.selection.$from.node(-1)) === null || _state$selection$$fro === void 0 ? void 0 : _state$selection$$fro.type;
   var parentNodeType = state.selection.$from.parent.type;
-  var node = createMediaSingleNode(state.schema, collection, alignLeftOnInsert)(mediaState);
+
+  // 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, undefined, alignLeftOnInsert)(mediaState);
   var fileExtension;
   if (mediaState.fileName) {
     var extensionIdx = mediaState.fileName.lastIndexOf('.');
@@ -119,7 +127,10 @@ export var insertMediaSingleNode = function insertMediaSingleNode(view, mediaSta
   }
   return true;
 };
-export var createMediaSingleNode = function createMediaSingleNode(schema, collection, alignLeftOnInsert) {
+export var createMediaSingleNode = function createMediaSingleNode(schema, collection) {
+  var maxWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : akEditorDefaultLayoutWidth;
+  var minWidth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : MEDIA_SINGLE_MIN_PIXEL_WIDTH;
+  var alignLeftOnInsert = arguments.length > 4 ? arguments[4] : undefined;
   return function (mediaState) {
     var id = mediaState.id,
       dimensions = mediaState.dimensions,
@@ -135,19 +146,26 @@ export var createMediaSingleNode = function createMediaSingleNode(schema, collec
     var _schema$nodes = schema.nodes,
       media = _schema$nodes.media,
       mediaSingle = _schema$nodes.mediaSingle;
+    var scaledWidth = width && Math.round(width / scaleFactor);
     var mediaNode = media.create({
       id: id,
       type: 'file',
       collection: collection,
       contextId: contextId,
-      width: width && Math.round(width / scaleFactor),
+      width: scaledWidth,
       height: height && Math.round(height / scaleFactor)
     });
     var mediaSingleAttrs = alignLeftOnInsert ? {
       layout: 'align-start'
     } : {};
+    var extendedMediaSingleAttrs = getBooleanFF('platform.editor.media.extended-resize-experience') ? _objectSpread(_objectSpread({}, mediaSingleAttrs), {}, {
+      // constrain initial width between max width (editor content width) and min width (default to 24)
+      width: Math.max(Math.min(scaledWidth || DEFAULT_IMAGE_WIDTH, maxWidth), minWidth),
+      // TODO: change to use enum
+      widthType: 'pixel'
+    }) : mediaSingleAttrs;
     copyOptionalAttrsFromMediaState(mediaState, mediaNode);
-    return mediaSingle.createChecked(mediaSingleAttrs, mediaNode);
+    return mediaSingle.createChecked(extendedMediaSingleAttrs, mediaNode);
   };
 };
 export function transformSliceForMedia(slice, schema) {

package/dist/esm/version-wrapper.js

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

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "187.5.0",
+	"version": "187.5.6",
 	"sideEffects": false
 }

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

@@ -1,14 +1,14 @@
-import { MediaProvider } from '@atlaskit/editor-common/provider-factory';
-import { NextEditorPlugin } from '../../types';
-import { OptionalPlugin } from '@atlaskit/editor-common/types';
-import { MediaState } from './pm-plugins/main';
-import { CustomMediaPicker, MediaOptions } from './types';
+import type { MediaProvider } from '@atlaskit/editor-common/provider-factory';
+import type { NextEditorPlugin } from '../../types';
+import type { OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { MediaState } from './pm-plugins/main';
+import type { CustomMediaPicker, MediaOptions } from './types';
 import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import type { gridPlugin } from '@atlaskit/editor-plugin-grid';
 import type { widthPlugin } from '@atlaskit/editor-plugin-width';
 import type { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
-import { MediaPluginState } from './pm-plugins/types';
+import type { MediaPluginState } from './pm-plugins/types';
 import type { FloatingToolbarPlugin } from '@atlaskit/editor-plugin-floating-toolbar';
 import type editorDisabled from '../editor-disabled';
 export type { MediaState, MediaProvider, CustomMediaPicker };

package/dist/types/plugins/media/nodeviews/mediaSingle.d.ts

@@ -1,19 +1,19 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import React, { Component, MouseEvent } from 'react';
-import { Node as PMNode } from 'prosemirror-model';
-import { DecorationSource, EditorView, Decoration } from 'prosemirror-view';
-import { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
-import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
-import type { ContextIdentifierProvider } from '@atlaskit/editor-common/provider-factory';
+import type { MouseEvent } from 'react';
+import React, { Component } from 'react';
+import type { Node as PMNode } from 'prosemirror-model';
+import type { DecorationSource, EditorView, Decoration } from 'prosemirror-view';
+import type { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
+import type { ContextIdentifierProvider, ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { CardEvent } from '@atlaskit/media-card';
-import { MediaClientConfig } from '@atlaskit/media-core';
-import { getPosHandler, ForwardRef } from '../../../nodeviews/';
-import { EventDispatcher } from '../../../event-dispatcher';
-import { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
-import { MediaOptions } from '../types';
-import { MediaSingleNodeProps, MediaSingleNodeViewProps } from './types';
+import type { CardEvent } from '@atlaskit/media-card';
+import type { MediaClientConfig } from '@atlaskit/media-core';
+import type { getPosHandler, ForwardRef } from '../../../nodeviews/';
+import type { EventDispatcher } from '../../../event-dispatcher';
+import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
+import type { MediaOptions } from '../types';
+import type { MediaSingleNodeProps, MediaSingleNodeViewProps } from './types';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';

package/dist/types/plugins/media/pm-plugins/main.d.ts

@@ -1,17 +1,21 @@
-import { Node as PMNode, Schema } from 'prosemirror-model';
+import type { Node as PMNode, Schema } from 'prosemirror-model';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { EditorState } from 'prosemirror-state';
-import { EditorView } from 'prosemirror-view';
-import { MediaClientConfig } from '@atlaskit/media-core';
-import { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
+import type { EditorState } from 'prosemirror-state';
+import type { EditorView } from 'prosemirror-view';
+import type { MediaClientConfig } from '@atlaskit/media-core';
+import type { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
 import type { ContextIdentifierProvider, MediaProvider } from '@atlaskit/editor-common/provider-factory';
-import { Dispatch } from '../../../event-dispatcher';
-import { ProsemirrorGetPosHandler } from '../../../nodeviews';
-import { MediaPluginOptions } from '../media-plugin-options';
-import { MediaOptions, MediaState, MediaStateStatus } from '../types';
-import PickerFacade, { MediaStateEventSubscriber } from '../picker-facade';
-import { MediaNodeWithPosHandler, MediaPluginState } from './types';
-import { IntlShape } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { WidthPluginState } from '@atlaskit/editor-plugin-width';
+import type { Dispatch } from '../../../event-dispatcher';
+import type { ProsemirrorGetPosHandler } from '../../../nodeviews';
+import type { MediaPluginOptions } from '../media-plugin-options';
+import type { MediaOptions, MediaState, MediaStateStatus } from '../types';
+import type { MediaStateEventSubscriber } from '../picker-facade';
+import PickerFacade from '../picker-facade';
+import type { MediaNodeWithPosHandler, MediaPluginState } from './types';
+import type { IntlShape } from 'react-intl-next';
+import type mediaPlugin from '../index';
 export type { MediaState, MediaProvider, MediaStateStatus };
 export { stateKey } from './plugin-key';
 export declare const MEDIA_CONTENT_WRAP_CLASS_NAME = "media-content-wrap";
@@ -46,7 +50,8 @@ export declare class MediaPluginStateImplementation implements MediaPluginState
     showEditingDialog?: boolean;
     mediaOptions?: MediaOptions;
     dispatch?: Dispatch;
-    constructor(state: EditorState, options: MediaPluginOptions, mediaOptions?: MediaOptions, newInsertionBehaviour?: boolean, dispatch?: Dispatch);
+    widthPluginState?: WidthPluginState | undefined;
+    constructor(state: EditorState, options: MediaPluginOptions, mediaOptions?: MediaOptions, newInsertionBehaviour?: boolean, dispatch?: Dispatch, pluginInjectionApi?: ExtractInjectionAPI<typeof mediaPlugin> | undefined);
     onContextIdentifierProvider: (_name: string, provider?: Promise<ContextIdentifierProvider>) => Promise<void>;
     setMediaProvider: (mediaProvider?: Promise<MediaProvider>) => Promise<void>;
     getMediaOptions: () => MediaPluginOptions;
@@ -105,4 +110,4 @@ export declare class MediaPluginStateImplementation implements MediaPluginState
     updateAndDispatch(props: Partial<Pick<this, 'allowsUploads' | 'allUploadsFinished' | 'isFullscreen'>>): void;
 }
 export declare const getMediaPluginState: (state: EditorState) => MediaPluginState;
-export declare const createPlugin: (_schema: Schema, options: MediaPluginOptions, reactContext: () => {}, getIntl: () => IntlShape, dispatch?: Dispatch, mediaOptions?: MediaOptions, newInsertionBehaviour?: boolean) => SafePlugin<MediaPluginState>;
+export declare const createPlugin: (_schema: Schema, options: MediaPluginOptions, reactContext: () => {}, getIntl: () => IntlShape, dispatch?: Dispatch, mediaOptions?: MediaOptions, newInsertionBehaviour?: boolean, pluginInjectionApi?: ExtractInjectionAPI<typeof mediaPlugin> | undefined) => SafePlugin<MediaPluginState>;

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

@@ -1,8 +1,10 @@
-import { Node as PMNode, Schema, Slice } from 'prosemirror-model';
-import { EditorView } from 'prosemirror-view';
-import { Selection } from 'prosemirror-state';
-import { MediaState } from '../types';
-import { InputMethodInsertMedia } from '@atlaskit/editor-common/analytics';
+import type { Node as PMNode, Schema } from 'prosemirror-model';
+import { Slice } from 'prosemirror-model';
+import type { EditorView } from 'prosemirror-view';
+import type { Selection } from 'prosemirror-state';
+import type { MediaState } from '../types';
+import type { InputMethodInsertMedia } from '@atlaskit/editor-common/analytics';
+import type { WidthPluginState } from '@atlaskit/editor-plugin-width';
 export interface MediaSingleState extends MediaState {
     dimensions: {
         width: number;
@@ -13,7 +15,7 @@ export interface MediaSingleState extends MediaState {
 }
 export declare const isMediaSingle: (schema: Schema, fileMimeType?: string) => boolean;
 export declare const insertMediaAsMediaSingle: (view: EditorView, node: PMNode, inputMethod: InputMethodInsertMedia) => boolean;
-export declare const insertMediaSingleNode: (view: EditorView, mediaState: MediaState, inputMethod?: InputMethodInsertMedia, collection?: string, alignLeftOnInsert?: boolean, newInsertionBehaviour?: boolean) => boolean;
-export declare const createMediaSingleNode: (schema: Schema, collection: string, alignLeftOnInsert?: boolean) => (mediaState: MediaSingleState) => PMNode;
+export declare const insertMediaSingleNode: (view: EditorView, mediaState: MediaState, inputMethod?: InputMethodInsertMedia, collection?: string, alignLeftOnInsert?: boolean, newInsertionBehaviour?: boolean, widthPluginState?: WidthPluginState | undefined) => boolean;
+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;

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

@@ -1,14 +1,14 @@
-import { MediaProvider } from '@atlaskit/editor-common/provider-factory';
-import { NextEditorPlugin } from '../../types';
-import { OptionalPlugin } from '@atlaskit/editor-common/types';
-import { MediaState } from './pm-plugins/main';
-import { CustomMediaPicker, MediaOptions } from './types';
+import type { MediaProvider } from '@atlaskit/editor-common/provider-factory';
+import type { NextEditorPlugin } from '../../types';
+import type { OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { MediaState } from './pm-plugins/main';
+import type { CustomMediaPicker, MediaOptions } from './types';
 import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import type { gridPlugin } from '@atlaskit/editor-plugin-grid';
 import type { widthPlugin } from '@atlaskit/editor-plugin-width';
 import type { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
-import { MediaPluginState } from './pm-plugins/types';
+import type { MediaPluginState } from './pm-plugins/types';
 import type { FloatingToolbarPlugin } from '@atlaskit/editor-plugin-floating-toolbar';
 import type editorDisabled from '../editor-disabled';
 export type { MediaState, MediaProvider, CustomMediaPicker };

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

@@ -1,19 +1,19 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import React, { Component, MouseEvent } from 'react';
-import { Node as PMNode } from 'prosemirror-model';
-import { DecorationSource, EditorView, Decoration } from 'prosemirror-view';
-import { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
-import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
-import type { ContextIdentifierProvider } from '@atlaskit/editor-common/provider-factory';
+import type { MouseEvent } from 'react';
+import React, { Component } from 'react';
+import type { Node as PMNode } from 'prosemirror-model';
+import type { DecorationSource, EditorView, Decoration } from 'prosemirror-view';
+import type { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
+import type { ContextIdentifierProvider, ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { CardEvent } from '@atlaskit/media-card';
-import { MediaClientConfig } from '@atlaskit/media-core';
-import { getPosHandler, ForwardRef } from '../../../nodeviews/';
-import { EventDispatcher } from '../../../event-dispatcher';
-import { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
-import { MediaOptions } from '../types';
-import { MediaSingleNodeProps, MediaSingleNodeViewProps } from './types';
+import type { CardEvent } from '@atlaskit/media-card';
+import type { MediaClientConfig } from '@atlaskit/media-core';
+import type { getPosHandler, ForwardRef } from '../../../nodeviews/';
+import type { EventDispatcher } from '../../../event-dispatcher';
+import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
+import type { MediaOptions } from '../types';
+import type { MediaSingleNodeProps, MediaSingleNodeViewProps } from './types';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';

package/dist/types-ts4.5/plugins/media/pm-plugins/main.d.ts

@@ -1,17 +1,21 @@
-import { Node as PMNode, Schema } from 'prosemirror-model';
+import type { Node as PMNode, Schema } from 'prosemirror-model';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { EditorState } from 'prosemirror-state';
-import { EditorView } from 'prosemirror-view';
-import { MediaClientConfig } from '@atlaskit/media-core';
-import { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
+import type { EditorState } from 'prosemirror-state';
+import type { EditorView } from 'prosemirror-view';
+import type { MediaClientConfig } from '@atlaskit/media-core';
+import type { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
 import type { ContextIdentifierProvider, MediaProvider } from '@atlaskit/editor-common/provider-factory';
-import { Dispatch } from '../../../event-dispatcher';
-import { ProsemirrorGetPosHandler } from '../../../nodeviews';
-import { MediaPluginOptions } from '../media-plugin-options';
-import { MediaOptions, MediaState, MediaStateStatus } from '../types';
-import PickerFacade, { MediaStateEventSubscriber } from '../picker-facade';
-import { MediaNodeWithPosHandler, MediaPluginState } from './types';
-import { IntlShape } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { WidthPluginState } from '@atlaskit/editor-plugin-width';
+import type { Dispatch } from '../../../event-dispatcher';
+import type { ProsemirrorGetPosHandler } from '../../../nodeviews';
+import type { MediaPluginOptions } from '../media-plugin-options';
+import type { MediaOptions, MediaState, MediaStateStatus } from '../types';
+import type { MediaStateEventSubscriber } from '../picker-facade';
+import PickerFacade from '../picker-facade';
+import type { MediaNodeWithPosHandler, MediaPluginState } from './types';
+import type { IntlShape } from 'react-intl-next';
+import type mediaPlugin from '../index';
 export type { MediaState, MediaProvider, MediaStateStatus };
 export { stateKey } from './plugin-key';
 export declare const MEDIA_CONTENT_WRAP_CLASS_NAME = "media-content-wrap";
@@ -46,7 +50,8 @@ export declare class MediaPluginStateImplementation implements MediaPluginState
     showEditingDialog?: boolean;
     mediaOptions?: MediaOptions;
     dispatch?: Dispatch;
-    constructor(state: EditorState, options: MediaPluginOptions, mediaOptions?: MediaOptions, newInsertionBehaviour?: boolean, dispatch?: Dispatch);
+    widthPluginState?: WidthPluginState | undefined;
+    constructor(state: EditorState, options: MediaPluginOptions, mediaOptions?: MediaOptions, newInsertionBehaviour?: boolean, dispatch?: Dispatch, pluginInjectionApi?: ExtractInjectionAPI<typeof mediaPlugin> | undefined);
     onContextIdentifierProvider: (_name: string, provider?: Promise<ContextIdentifierProvider>) => Promise<void>;
     setMediaProvider: (mediaProvider?: Promise<MediaProvider>) => Promise<void>;
     getMediaOptions: () => MediaPluginOptions;
@@ -105,4 +110,4 @@ export declare class MediaPluginStateImplementation implements MediaPluginState
     updateAndDispatch(props: Partial<Pick<this, 'allowsUploads' | 'allUploadsFinished' | 'isFullscreen'>>): void;
 }
 export declare const getMediaPluginState: (state: EditorState) => MediaPluginState;
-export declare const createPlugin: (_schema: Schema, options: MediaPluginOptions, reactContext: () => {}, getIntl: () => IntlShape, dispatch?: Dispatch, mediaOptions?: MediaOptions, newInsertionBehaviour?: boolean) => SafePlugin<MediaPluginState>;
+export declare const createPlugin: (_schema: Schema, options: MediaPluginOptions, reactContext: () => {}, getIntl: () => IntlShape, dispatch?: Dispatch, mediaOptions?: MediaOptions, newInsertionBehaviour?: boolean, pluginInjectionApi?: ExtractInjectionAPI<typeof mediaPlugin> | undefined) => SafePlugin<MediaPluginState>;

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

@@ -1,8 +1,10 @@
-import { Node as PMNode, Schema, Slice } from 'prosemirror-model';
-import { EditorView } from 'prosemirror-view';
-import { Selection } from 'prosemirror-state';
-import { MediaState } from '../types';
-import { InputMethodInsertMedia } from '@atlaskit/editor-common/analytics';
+import type { Node as PMNode, Schema } from 'prosemirror-model';
+import { Slice } from 'prosemirror-model';
+import type { EditorView } from 'prosemirror-view';
+import type { Selection } from 'prosemirror-state';
+import type { MediaState } from '../types';
+import type { InputMethodInsertMedia } from '@atlaskit/editor-common/analytics';
+import type { WidthPluginState } from '@atlaskit/editor-plugin-width';
 export interface MediaSingleState extends MediaState {
     dimensions: {
         width: number;
@@ -13,7 +15,7 @@ export interface MediaSingleState extends MediaState {
 }
 export declare const isMediaSingle: (schema: Schema, fileMimeType?: string) => boolean;
 export declare const insertMediaAsMediaSingle: (view: EditorView, node: PMNode, inputMethod: InputMethodInsertMedia) => boolean;
-export declare const insertMediaSingleNode: (view: EditorView, mediaState: MediaState, inputMethod?: InputMethodInsertMedia, collection?: string, alignLeftOnInsert?: boolean, newInsertionBehaviour?: boolean) => boolean;
-export declare const createMediaSingleNode: (schema: Schema, collection: string, alignLeftOnInsert?: boolean) => (mediaState: MediaSingleState) => PMNode;
+export declare const insertMediaSingleNode: (view: EditorView, mediaState: MediaState, inputMethod?: InputMethodInsertMedia, collection?: string, alignLeftOnInsert?: boolean, newInsertionBehaviour?: boolean, widthPluginState?: WidthPluginState | undefined) => boolean;
+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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-core",
-  "version": "187.5.0",
+  "version": "187.5.6",
   "description": "A package contains Atlassian editor core functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -95,7 +95,7 @@
     "@atlaskit/radio": "^5.6.0",
     "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/select": "^16.5.0",
-    "@atlaskit/smart-card": "^26.10.0",
+    "@atlaskit/smart-card": "^26.11.0",
     "@atlaskit/smart-user-picker": "^6.1.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/status": "^1.3.0",
@@ -156,7 +156,7 @@
     "@atlaskit/inline-dialog": "^13.6.0",
     "@atlaskit/link-analytics": "^8.2.0",
     "@atlaskit/link-provider": "^1.6.0",
-    "@atlaskit/link-test-helpers": "^4.2.0",
+    "@atlaskit/link-test-helpers": "^5.0.0",
     "@atlaskit/media-core": "^34.1.0",
     "@atlaskit/media-integration-test-helpers": "^3.0.0",
     "@atlaskit/media-test-helpers": "^33.0.0",

package/report.api.md

@@ -90,7 +90,7 @@ import type { gridPlugin } from '@atlaskit/editor-plugin-grid';
 import { HeadingLevelsAndNormalText } from '@atlaskit/editor-common/types';
 import type { HyperlinkPluginOptions } from '@atlaskit/editor-common/types';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { InputMethodInsertMedia } from '@atlaskit/editor-common/analytics';
+import type { InputMethodInsertMedia } from '@atlaskit/editor-common/analytics';
 import { InputTracking } from '@atlaskit/editor-common/types';
 import { IntlShape } from 'react-intl-next';
 import { JSONDocNode } from '@atlaskit/editor-json-transformer/types';
@@ -116,7 +116,7 @@ import { Node as Node_2 } from 'prosemirror-model';
 import { NodeConfig } from '@atlaskit/editor-common/types';
 import { NodeType } from 'prosemirror-model';
 import { NodeView } from 'prosemirror-view';
-import { OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { OptionalPlugin } from '@atlaskit/editor-common/types';
 import { PaletteColor } from '@atlaskit/editor-common/ui-color';
 import { PerformanceTracking } from '@atlaskit/editor-common/types';
 import type { PluginConfig } from '@atlaskit/editor-plugin-table/types';
@@ -166,6 +166,7 @@ import { UploadParams } from '@atlaskit/media-picker/types';
 import { UploadPreviewUpdateEventPayload } from '@atlaskit/media-picker/types';
 import type { WeekDay } from '@atlaskit/calendar/types';
 import type { widthPlugin } from '@atlaskit/editor-plugin-width';
+import type { WidthPluginState } from '@atlaskit/editor-plugin-width';
 import { WithIntlProps } from 'react-intl-next';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import { WrappedComponentProps } from 'react-intl-next';
@@ -1247,6 +1248,7 @@ export const insertMediaSingleNode: (
   collection?: string,
   alignLeftOnInsert?: boolean,
   newInsertionBehaviour?: boolean,
+  widthPluginState?: WidthPluginState | undefined,
 ) => boolean;
 
 // @public (undocumented)

package/tmp/api-report-tmp.d.ts

@@ -79,7 +79,7 @@ import type { gridPlugin } from '@atlaskit/editor-plugin-grid';
 import { HeadingLevelsAndNormalText } from '@atlaskit/editor-common/types';
 import type { HyperlinkPluginOptions } from '@atlaskit/editor-common/types';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { InputMethodInsertMedia } from '@atlaskit/editor-common/analytics';
+import type { InputMethodInsertMedia } from '@atlaskit/editor-common/analytics';
 import { InputTracking } from '@atlaskit/editor-common/types';
 import { IntlShape } from 'react-intl-next';
 import { JSONDocNode } from '@atlaskit/editor-json-transformer/types';
@@ -105,7 +105,7 @@ import { Node as Node_2 } from 'prosemirror-model';
 import { NodeConfig } from '@atlaskit/editor-common/types';
 import { NodeType } from 'prosemirror-model';
 import { NodeView } from 'prosemirror-view';
-import { OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { OptionalPlugin } from '@atlaskit/editor-common/types';
 import { PaletteColor } from '@atlaskit/editor-common/ui-color';
 import { PerformanceTracking } from '@atlaskit/editor-common/types';
 import type { PluginConfig } from '@atlaskit/editor-plugin-table/types';
@@ -155,6 +155,7 @@ import { UploadParams } from '@atlaskit/media-picker/types';
 import { UploadPreviewUpdateEventPayload } from '@atlaskit/media-picker/types';
 import type { WeekDay } from '@atlaskit/calendar/types';
 import type { widthPlugin } from '@atlaskit/editor-plugin-width';
+import type { WidthPluginState } from '@atlaskit/editor-plugin-width';
 import { WithIntlProps } from 'react-intl-next';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import { WrappedComponentProps } from 'react-intl-next';
@@ -1128,7 +1129,7 @@ type InsertItemProps = {
 };
 
 // @public (undocumented)
-export const insertMediaSingleNode: (view: EditorView, mediaState: MediaState, inputMethod?: InputMethodInsertMedia, collection?: string, alignLeftOnInsert?: boolean, newInsertionBehaviour?: boolean) => boolean;
+export const insertMediaSingleNode: (view: EditorView, mediaState: MediaState, inputMethod?: InputMethodInsertMedia, collection?: string, alignLeftOnInsert?: boolean, newInsertionBehaviour?: boolean, widthPluginState?: WidthPluginState | undefined) => boolean;
 
 // @public (undocumented)
 export const insertTaskDecisionCommand: (listType: TaskDecisionListType, inputMethod?: INPUT_METHOD.FORMATTING | INPUT_METHOD.QUICK_INSERT | InsertBlockInputMethodToolbar, addItem?: AddItemTransactionCreator, listLocalId?: string, itemLocalId?: string) => Command;