@atlaskit/editor-plugin-media 0.3.0 → 0.3.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-media
 
+## 0.3.2
+
+### Patch Changes
+
+- [#41248](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41248) [`21fa5648746`](https://bitbucket.org/atlassian/atlassian-frontend/commits/21fa5648746) - Fix incorrect layout calculation for nested Media Single nodes resized via toolbar
+- Updated dependencies
+
+## 0.3.1
+
+### Patch Changes
+
+- [#40750](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40750) [`fc19a7b9edd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fc19a7b9edd) - [ED-19875] Extraction of Editor Core's Selection Plugin into independent package '@atlaskit/editor-plugin-selection'.
+- Updated dependencies
+
 ## 0.3.0
 
 ### Minor Changes

package/dist/cjs/plugin.js

@@ -153,7 +153,7 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref2) {
         name: 'mediaKeymap',
         plugin: function plugin() {
           var _api$analytics2;
-          return (0, _keymap2.default)(options, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions);
+          return (0, _keymap2.default)(options, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api === null || api === void 0 ? void 0 : api.selection.actions);
         }
       }];
       if (options && options.allowMediaSingle) {

package/dist/cjs/pm-plugins/keymap.js

@@ -12,7 +12,7 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _mediaCommon = require("@atlaskit/media-common");
 var _captions = require("../commands/captions");
 var _pluginKey = require("../pm-plugins/plugin-key");
-function keymapPlugin(options, editorAnalyticsAPI) {
+function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI) {
   var list = {};
   var _ref = options || {},
     featureFlags = _ref.featureFlags;
@@ -21,8 +21,8 @@ function keymapPlugin(options, editorAnalyticsAPI) {
   if (options !== null && options !== void 0 && options.allowCaptions || (0, _mediaCommon.getMediaFeatureFlag)('captions', featureFlags)) {
     (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveDown.common, insertAndSelectCaption(editorAnalyticsAPI), list);
     (0, _keymaps.bindKeymapWithCommand)(_keymaps.tab.common, insertAndSelectCaption(editorAnalyticsAPI), list);
-    (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveLeft.common, arrowLeftFromMediaSingle(options === null || options === void 0 ? void 0 : options.editorSelectionAPI), list);
-    (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveRight.common, arrowRightFromMediaSingle(options === null || options === void 0 ? void 0 : options.editorSelectionAPI), list);
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveLeft.common, arrowLeftFromMediaSingle(editorSelectionAPI), list);
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveRight.common, arrowRightFromMediaSingle(editorSelectionAPI), list);
   }
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.insertNewLine.common, splitMediaGroup, list);
   return (0, _keymap.keymap)(list);
@@ -57,7 +57,7 @@ var arrowLeftFromMediaSingle = function arrowLeftFromMediaSingle(editorSelection
   return function (state, dispatch) {
     var selection = state.selection;
     if (editorSelectionAPI && selection instanceof _state.NodeSelection && selection.node.type.name === 'mediaSingle') {
-      var tr = editorSelectionAPI.setSelectionRelativeToNode({
+      var tr = editorSelectionAPI.selectNearNode({
         selectionRelativeToNode: undefined,
         selection: new _selection.GapCursorSelection(state.doc.resolve(selection.from), _selection.Side.LEFT)
       })(state);
@@ -73,7 +73,7 @@ var arrowRightFromMediaSingle = function arrowRightFromMediaSingle(editorSelecti
   return function (state, dispatch) {
     var selection = state.selection;
     if (editorSelectionAPI && selection instanceof _state.NodeSelection && selection.node.type.name === 'mediaSingle') {
-      var tr = editorSelectionAPI.setSelectionRelativeToNode({
+      var tr = editorSelectionAPI.selectNearNode({
         selectionRelativeToNode: undefined,
         selection: new _selection.GapCursorSelection(state.doc.resolve(selection.to), _selection.Side.RIGHT)
       })(state);

package/dist/cjs/toolbar/index.js

@@ -297,6 +297,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           // get pos of media node
           mediaWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH);
           var pixelWidth = isLegacy ? pixelWidthFromElement : mediaSingleWidth;
+
+          //hasParentNode will return falsey value if selection depth === 0
+          var isNested = (0, _utils.hasParentNode)(function (n) {
+            return n.type !== state.schema.nodes.doc;
+          })(state.selection);
           return /*#__PURE__*/_react.default.createElement(_PixelEntry.PixelEntry, {
             intl: intl,
             width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
@@ -316,7 +321,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
               var _pluginInjectionApi$a4;
               var width = _ref2.width,
                 validation = _ref2.validation;
-              var newLayout = (0, _utils2.calcNewLayout)(width, layout, contentWidth, options.fullWidthEnabled);
+              var newLayout = (0, _utils2.calcNewLayout)(width, layout, contentWidth, options.fullWidthEnabled, isNested);
               (0, _commands.updateMediaSingleWidth)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions)(width, validation, newLayout)(state, dispatch);
             },
             onMigrate: function onMigrate() {

package/dist/cjs/toolbar/utils.js

@@ -81,7 +81,10 @@ var getPixelWidthOfElement = exports.getPixelWidthOfElement = function getPixelW
 };
 var calcNewLayout = exports.calcNewLayout = function calcNewLayout(width, layout, contentWidth) {
   var fullWidthMode = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var isNested = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   var isWrappedLayout = _mediaSingle.wrappedLayouts.indexOf(layout) > -1;
+
+  //See flowchart for layout logic: https://hello.atlassian.net/wiki/spaces/TWPCP/whiteboard/2969594044
   if (width >= _editorSharedStyles.akEditorFullWidthLayoutWidth) {
     // If width is greater than or equal to full editor width
     return 'full-width';
@@ -90,11 +93,11 @@ var calcNewLayout = exports.calcNewLayout = function calcNewLayout(width, layout
     // If under editor full width mode
     return isWrappedLayout ? layout : 'center';
   }
-  if (width > contentWidth) {
+  if (width > contentWidth && !isNested) {
     // If width is greater than content length and not nested
     return 'wide';
   }
-  return isWrappedLayout && width !== contentWidth ? layout : 'center';
+  return isNested || isWrappedLayout && width !== contentWidth ? layout : 'center';
 };
 var maxToolbarFitWidth = 0;
 var getMaxToolbarWidth = exports.getMaxToolbarWidth = function getMaxToolbarWidth() {

package/dist/es2019/plugin.js

@@ -144,7 +144,7 @@ export const mediaPlugin = ({
         name: 'mediaKeymap',
         plugin: () => {
           var _api$analytics2;
-          return keymapPlugin(options, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions);
+          return keymapPlugin(options, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api === null || api === void 0 ? void 0 : api.selection.actions);
         }
       }];
       if (options && options.allowMediaSingle) {

package/dist/es2019/pm-plugins/keymap.js

@@ -5,7 +5,7 @@ import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
 import { insertAndSelectCaptionFromMediaSinglePos, selectCaptionFromMediaSinglePos } from '../commands/captions';
 import { stateKey } from '../pm-plugins/plugin-key';
-export function keymapPlugin(options, editorAnalyticsAPI) {
+export function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI) {
   const list = {};
   const {
     featureFlags
@@ -15,8 +15,8 @@ export function keymapPlugin(options, editorAnalyticsAPI) {
   if (options !== null && options !== void 0 && options.allowCaptions || getMediaFeatureFlag('captions', featureFlags)) {
     bindKeymapWithCommand(moveDown.common, insertAndSelectCaption(editorAnalyticsAPI), list);
     bindKeymapWithCommand(tab.common, insertAndSelectCaption(editorAnalyticsAPI), list);
-    bindKeymapWithCommand(moveLeft.common, arrowLeftFromMediaSingle(options === null || options === void 0 ? void 0 : options.editorSelectionAPI), list);
-    bindKeymapWithCommand(moveRight.common, arrowRightFromMediaSingle(options === null || options === void 0 ? void 0 : options.editorSelectionAPI), list);
+    bindKeymapWithCommand(moveLeft.common, arrowLeftFromMediaSingle(editorSelectionAPI), list);
+    bindKeymapWithCommand(moveRight.common, arrowRightFromMediaSingle(editorSelectionAPI), list);
   }
   bindKeymapWithCommand(insertNewLine.common, splitMediaGroup, list);
   return keymap(list);
@@ -54,7 +54,7 @@ const arrowLeftFromMediaSingle = editorSelectionAPI => (state, dispatch) => {
     selection
   } = state;
   if (editorSelectionAPI && selection instanceof NodeSelection && selection.node.type.name === 'mediaSingle') {
-    const tr = editorSelectionAPI.setSelectionRelativeToNode({
+    const tr = editorSelectionAPI.selectNearNode({
       selectionRelativeToNode: undefined,
       selection: new GapCursorSelection(state.doc.resolve(selection.from), Side.LEFT)
     })(state);
@@ -70,7 +70,7 @@ const arrowRightFromMediaSingle = editorSelectionAPI => (state, dispatch) => {
     selection
   } = state;
   if (editorSelectionAPI && selection instanceof NodeSelection && selection.node.type.name === 'mediaSingle') {
-    const tr = editorSelectionAPI.setSelectionRelativeToNode({
+    const tr = editorSelectionAPI.selectNearNode({
       selectionRelativeToNode: undefined,
       selection: new GapCursorSelection(state.doc.resolve(selection.to), Side.RIGHT)
     })(state);

package/dist/es2019/toolbar/index.js

@@ -4,7 +4,7 @@ import { buildLayoutButtons } from '@atlaskit/editor-common/card';
 import { calcMinWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
 import commonMessages, { cardMessages } from '@atlaskit/editor-common/messages';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { findParentNodeOfType, hasParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
+import { findParentNodeOfType, hasParentNode, hasParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
@@ -300,6 +300,9 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
           // get pos of media node
           mediaWidth || DEFAULT_IMAGE_WIDTH);
           const pixelWidth = isLegacy ? pixelWidthFromElement : mediaSingleWidth;
+
+          //hasParentNode will return falsey value if selection depth === 0
+          const isNested = hasParentNode(n => n.type !== state.schema.nodes.doc)(state.selection);
           return /*#__PURE__*/React.createElement(PixelEntry, {
             intl: intl,
             width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
@@ -320,7 +323,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
               validation
             }) => {
               var _pluginInjectionApi$a4;
-              const newLayout = calcNewLayout(width, layout, contentWidth, options.fullWidthEnabled);
+              const newLayout = calcNewLayout(width, layout, contentWidth, options.fullWidthEnabled, isNested);
               updateMediaSingleWidth(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions)(width, validation, newLayout)(state, dispatch);
             },
             onMigrate: () => {

package/dist/es2019/toolbar/utils.js

@@ -56,8 +56,10 @@ export const getPixelWidthOfElement = (editorView, pos, mediaWidth) => {
   }
   return mediaWidth;
 };
-export const calcNewLayout = (width, layout, contentWidth, fullWidthMode = false) => {
+export const calcNewLayout = (width, layout, contentWidth, fullWidthMode = false, isNested = false) => {
   const isWrappedLayout = wrappedLayouts.indexOf(layout) > -1;
+
+  //See flowchart for layout logic: https://hello.atlassian.net/wiki/spaces/TWPCP/whiteboard/2969594044
   if (width >= akEditorFullWidthLayoutWidth) {
     // If width is greater than or equal to full editor width
     return 'full-width';
@@ -66,11 +68,11 @@ export const calcNewLayout = (width, layout, contentWidth, fullWidthMode = false
     // If under editor full width mode
     return isWrappedLayout ? layout : 'center';
   }
-  if (width > contentWidth) {
+  if (width > contentWidth && !isNested) {
     // If width is greater than content length and not nested
     return 'wide';
   }
-  return isWrappedLayout && width !== contentWidth ? layout : 'center';
+  return isNested || isWrappedLayout && width !== contentWidth ? layout : 'center';
 };
 let maxToolbarFitWidth = 0;
 export const getMaxToolbarWidth = () => {

package/dist/esm/plugin.js

@@ -142,7 +142,7 @@ export var mediaPlugin = function mediaPlugin(_ref2) {
         name: 'mediaKeymap',
         plugin: function plugin() {
           var _api$analytics2;
-          return keymapPlugin(options, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions);
+          return keymapPlugin(options, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api === null || api === void 0 ? void 0 : api.selection.actions);
         }
       }];
       if (options && options.allowMediaSingle) {

package/dist/esm/pm-plugins/keymap.js

@@ -5,7 +5,7 @@ import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
 import { insertAndSelectCaptionFromMediaSinglePos, selectCaptionFromMediaSinglePos } from '../commands/captions';
 import { stateKey } from '../pm-plugins/plugin-key';
-export function keymapPlugin(options, editorAnalyticsAPI) {
+export function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI) {
   var list = {};
   var _ref = options || {},
     featureFlags = _ref.featureFlags;
@@ -14,8 +14,8 @@ export function keymapPlugin(options, editorAnalyticsAPI) {
   if (options !== null && options !== void 0 && options.allowCaptions || getMediaFeatureFlag('captions', featureFlags)) {
     bindKeymapWithCommand(moveDown.common, insertAndSelectCaption(editorAnalyticsAPI), list);
     bindKeymapWithCommand(tab.common, insertAndSelectCaption(editorAnalyticsAPI), list);
-    bindKeymapWithCommand(moveLeft.common, arrowLeftFromMediaSingle(options === null || options === void 0 ? void 0 : options.editorSelectionAPI), list);
-    bindKeymapWithCommand(moveRight.common, arrowRightFromMediaSingle(options === null || options === void 0 ? void 0 : options.editorSelectionAPI), list);
+    bindKeymapWithCommand(moveLeft.common, arrowLeftFromMediaSingle(editorSelectionAPI), list);
+    bindKeymapWithCommand(moveRight.common, arrowRightFromMediaSingle(editorSelectionAPI), list);
   }
   bindKeymapWithCommand(insertNewLine.common, splitMediaGroup, list);
   return keymap(list);
@@ -50,7 +50,7 @@ var arrowLeftFromMediaSingle = function arrowLeftFromMediaSingle(editorSelection
   return function (state, dispatch) {
     var selection = state.selection;
     if (editorSelectionAPI && selection instanceof NodeSelection && selection.node.type.name === 'mediaSingle') {
-      var tr = editorSelectionAPI.setSelectionRelativeToNode({
+      var tr = editorSelectionAPI.selectNearNode({
         selectionRelativeToNode: undefined,
         selection: new GapCursorSelection(state.doc.resolve(selection.from), Side.LEFT)
       })(state);
@@ -66,7 +66,7 @@ var arrowRightFromMediaSingle = function arrowRightFromMediaSingle(editorSelecti
   return function (state, dispatch) {
     var selection = state.selection;
     if (editorSelectionAPI && selection instanceof NodeSelection && selection.node.type.name === 'mediaSingle') {
-      var tr = editorSelectionAPI.setSelectionRelativeToNode({
+      var tr = editorSelectionAPI.selectNearNode({
         selectionRelativeToNode: undefined,
         selection: new GapCursorSelection(state.doc.resolve(selection.to), Side.RIGHT)
       })(state);

package/dist/esm/toolbar/index.js

@@ -8,7 +8,7 @@ import { buildLayoutButtons } from '@atlaskit/editor-common/card';
 import { calcMinWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
 import commonMessages, { cardMessages } from '@atlaskit/editor-common/messages';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { findParentNodeOfType, hasParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
+import { findParentNodeOfType, hasParentNode, hasParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
@@ -287,6 +287,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           // get pos of media node
           mediaWidth || DEFAULT_IMAGE_WIDTH);
           var pixelWidth = isLegacy ? pixelWidthFromElement : mediaSingleWidth;
+
+          //hasParentNode will return falsey value if selection depth === 0
+          var isNested = hasParentNode(function (n) {
+            return n.type !== state.schema.nodes.doc;
+          })(state.selection);
           return /*#__PURE__*/React.createElement(PixelEntry, {
             intl: intl,
             width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
@@ -306,7 +311,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
               var _pluginInjectionApi$a4;
               var width = _ref2.width,
                 validation = _ref2.validation;
-              var newLayout = calcNewLayout(width, layout, contentWidth, options.fullWidthEnabled);
+              var newLayout = calcNewLayout(width, layout, contentWidth, options.fullWidthEnabled, isNested);
               updateMediaSingleWidth(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions)(width, validation, newLayout)(state, dispatch);
             },
             onMigrate: function onMigrate() {

package/dist/esm/toolbar/utils.js

@@ -74,7 +74,10 @@ export var getPixelWidthOfElement = function getPixelWidthOfElement(editorView,
 };
 export var calcNewLayout = function calcNewLayout(width, layout, contentWidth) {
   var fullWidthMode = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var isNested = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   var isWrappedLayout = wrappedLayouts.indexOf(layout) > -1;
+
+  //See flowchart for layout logic: https://hello.atlassian.net/wiki/spaces/TWPCP/whiteboard/2969594044
   if (width >= akEditorFullWidthLayoutWidth) {
     // If width is greater than or equal to full editor width
     return 'full-width';
@@ -83,11 +86,11 @@ export var calcNewLayout = function calcNewLayout(width, layout, contentWidth) {
     // If under editor full width mode
     return isWrappedLayout ? layout : 'center';
   }
-  if (width > contentWidth) {
+  if (width > contentWidth && !isNested) {
     // If width is greater than content length and not nested
     return 'wide';
   }
-  return isWrappedLayout && width !== contentWidth ? layout : 'center';
+  return isNested || isWrappedLayout && width !== contentWidth ? layout : 'center';
 };
 var maxToolbarFitWidth = 0;
 export var getMaxToolbarWidth = function getMaxToolbarWidth() {

package/dist/types/next-plugin-type.d.ts

@@ -7,6 +7,7 @@ import type { FloatingToolbarPlugin } from '@atlaskit/editor-plugin-floating-too
 import type { FocusPlugin } from '@atlaskit/editor-plugin-focus';
 import type { GridPlugin } from '@atlaskit/editor-plugin-grid';
 import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
+import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { MediaPluginState } from './pm-plugins/types';
 import type { MediaOptions } from './types';
@@ -22,7 +23,8 @@ export type MediaNextEditorPluginType = NextEditorPlugin<'media', {
         DecorationsPlugin,
         FloatingToolbarPlugin,
         EditorDisabledPlugin,
-        FocusPlugin
+        FocusPlugin,
+        SelectionPlugin
     ];
     sharedState: MediaPluginState | null;
     actions: {

package/dist/types/pm-plugins/keymap.d.ts

@@ -1,5 +1,6 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { EditorSelectionAPI } from '@atlaskit/editor-plugin-selection';
 import type { MediaOptions } from '../types';
-export declare function keymapPlugin(options: MediaOptions | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined): SafePlugin;
+export declare function keymapPlugin(options: MediaOptions | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, editorSelectionAPI: EditorSelectionAPI | undefined): SafePlugin;
 export default keymapPlugin;

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

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

package/dist/types-ts4.5/next-plugin-type.d.ts

@@ -7,6 +7,7 @@ import type { FloatingToolbarPlugin } from '@atlaskit/editor-plugin-floating-too
 import type { FocusPlugin } from '@atlaskit/editor-plugin-focus';
 import type { GridPlugin } from '@atlaskit/editor-plugin-grid';
 import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
+import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { MediaPluginState } from './pm-plugins/types';
 import type { MediaOptions } from './types';
@@ -22,7 +23,8 @@ export type MediaNextEditorPluginType = NextEditorPlugin<'media', {
         DecorationsPlugin,
         FloatingToolbarPlugin,
         EditorDisabledPlugin,
-        FocusPlugin
+        FocusPlugin,
+        SelectionPlugin
     ];
     sharedState: MediaPluginState | null;
     actions: {

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

@@ -1,5 +1,6 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { EditorSelectionAPI } from '@atlaskit/editor-plugin-selection';
 import type { MediaOptions } from '../types';
-export declare function keymapPlugin(options: MediaOptions | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined): SafePlugin;
+export declare function keymapPlugin(options: MediaOptions | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, editorSelectionAPI: EditorSelectionAPI | undefined): SafePlugin;
 export default keymapPlugin;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-media",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Media plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -36,7 +36,7 @@
     "@atlaskit/analytics-namespaced-context": "^6.7.0",
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/button": "^16.10.0",
-    "@atlaskit/editor-common": "^76.6.0",
+    "@atlaskit/editor-common": "^76.9.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.2.0",
     "@atlaskit/editor-plugin-decorations": "^0.2.0",
@@ -62,7 +62,7 @@
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/textfield": "^5.6.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.22.0",
+    "@atlaskit/tokens": "^1.26.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",

package/report.api.md

@@ -43,6 +43,7 @@ import type { OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { Providers } from '@atlaskit/editor-common/provider-factory';
 import type { RichMediaLayout } from '@atlaskit/adf-schema';
+import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { UploadEndEventPayload } from '@atlaskit/media-picker/types';
 import type { UploadErrorEventPayload } from '@atlaskit/media-picker/types';
 import type { UploadParams } from '@atlaskit/media-picker/types';
@@ -164,6 +165,7 @@ export type MediaPlugin = NextEditorPlugin<
       FloatingToolbarPlugin,
       EditorDisabledPlugin,
       FocusPlugin,
+      SelectionPlugin,
     ];
     sharedState: MediaPluginState | null;
     actions: {

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

@@ -32,6 +32,7 @@ import type { OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { Providers } from '@atlaskit/editor-common/provider-factory';
 import type { RichMediaLayout } from '@atlaskit/adf-schema';
+import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { UploadEndEventPayload } from '@atlaskit/media-picker/types';
 import type { UploadErrorEventPayload } from '@atlaskit/media-picker/types';
 import type { UploadParams } from '@atlaskit/media-picker/types';
@@ -146,7 +147,8 @@ export type MediaPlugin = NextEditorPlugin<'media', {
     DecorationsPlugin,
     FloatingToolbarPlugin,
     EditorDisabledPlugin,
-    FocusPlugin
+    FocusPlugin,
+    SelectionPlugin
     ];
     sharedState: MediaPluginState | null;
     actions: {