@atlaskit/editor-core 185.5.0 → 185.5.5

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 = "185.5.0";
+var version = "185.5.5";
 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": "185.5.0",
+	"version": "185.5.5",
 	"sideEffects": false
 }

package/dist/es2019/plugins/breakout/ui/LayoutButton.js

@@ -12,13 +12,13 @@ import ToolbarButton from '../../../ui/ToolbarButton';
 import { getBreakoutMode } from '../utils/get-breakout-mode';
 import { setBreakoutMode } from '../commands/set-breakout-mode';
 import { removeBreakout } from '../commands/remove-breakout';
-import commonMessages from '../../../messages';
 import { BreakoutCssClassName } from '../constants';
 import { isBreakoutMarkAllowed } from '../utils/is-breakout-mark-allowed';
 import { getPluginState } from '../plugin-key';
 import { NodeSelection } from 'prosemirror-state';
 import { isSupportedNodeForBreakout } from '../utils/is-supported-node';
 import { layers } from '@atlaskit/theme/constants';
+import { getNextBreakoutMode, getTitle } from '@atlaskit/editor-common/utils';
 const toolbarButtonWrapper = css`
   && button {
     background: ${`var(--ds-background-neutral, ${N20A})`};
@@ -29,29 +29,6 @@ const toolbarButtonWrapper = css`
     }
   }
 `;
-const BREAKOUT_MODE = {
-  FULL_WIDTH: 'full-width',
-  CENTER: 'center',
-  WIDE: 'wide'
-};
-const getNextBreakoutMode = currentMode => {
-  if (currentMode === BREAKOUT_MODE.FULL_WIDTH) {
-    return BREAKOUT_MODE.CENTER;
-  } else if (currentMode === BREAKOUT_MODE.WIDE) {
-    return BREAKOUT_MODE.FULL_WIDTH;
-  }
-  return BREAKOUT_MODE.WIDE;
-};
-const getTitle = layout => {
-  switch (layout) {
-    case BREAKOUT_MODE.FULL_WIDTH:
-      return commonMessages.layoutFixedWidth;
-    case BREAKOUT_MODE.WIDE:
-      return commonMessages.layoutFullWidth;
-    default:
-      return commonMessages.layoutWide;
-  }
-};
 function getBreakoutNodeElement(pluginState, selection, editorView) {
   if (selection instanceof NodeSelection && isSupportedNodeForBreakout(selection.node)) {
     return findDomRefAtPos(selection.from, editorView.domAtPos.bind(editorView));
@@ -66,7 +43,7 @@ class LayoutButton extends React.Component {
         state,
         dispatch
       } = this.props.editorView;
-      if ([BREAKOUT_MODE.WIDE, BREAKOUT_MODE.FULL_WIDTH].indexOf(breakoutMode) !== -1) {
+      if (['wide', 'full-width'].indexOf(breakoutMode) !== -1) {
         setBreakoutMode(breakoutMode)(state, dispatch);
       } else {
         removeBreakout()(state, dispatch);
@@ -122,7 +99,7 @@ class LayoutButton extends React.Component {
       title: title,
       testId: titleMessage.id,
       onClick: this.handleClick(nextBreakoutMode),
-      iconBefore: breakoutMode === BREAKOUT_MODE.FULL_WIDTH ? jsx(CollapseIcon, {
+      iconBefore: breakoutMode === 'full-width' ? jsx(CollapseIcon, {
         label: title
       }) : jsx(ExpandIcon, {
         label: title

package/dist/es2019/plugins/breakout/utils/get-breakout-mode.js

@@ -1,5 +1,4 @@
 import { findSupportedNodeForBreakout } from './find-breakout-node';
-
 /**
  * Get the current mode of the breakout at the selection
  * @param state Current EditorState

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

@@ -1,15 +1,23 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { inlineCard, blockCard, embedCard } from '@atlaskit/adf-schema';
 import { createPlugin } from './pm-plugins/main';
 import { floatingToolbar } from './toolbar';
 import { EditorSmartCardEvents } from './ui/EditorSmartCardEvents';
 import { cardKeymap } from './pm-plugins/keymap';
 import { EditorSmartCardEventsNext } from './ui/EditorSmartCardEventsNext';
+import LayoutButton from './ui/LayoutButton';
+import { pluginKey } from './pm-plugins/plugin-key';
 const cardPlugin = (options, api) => {
   var _api$dependencies, _api$dependencies$fea;
   const featureFlags = (api === null || api === void 0 ? void 0 : (_api$dependencies = api.dependencies) === null || _api$dependencies === void 0 ? void 0 : (_api$dependencies$fea = _api$dependencies.featureFlags) === null || _api$dependencies$fea === void 0 ? void 0 : _api$dependencies$fea.sharedState.currentState()) || {};
   return {
     name: 'card',
+    getSharedState(editorState) {
+      if (!editorState) {
+        return null;
+      }
+      return pluginKey.getState(editorState);
+    },
     nodes() {
       const nodes = [{
         name: 'inlineCard',
@@ -55,15 +63,24 @@ const cardPlugin = (options, api) => {
       return plugins;
     },
     contentComponent({
-      editorView
+      editorView,
+      popupsMountPoint,
+      popupsScrollableElement,
+      popupsBoundariesElement
     }) {
       const {
         lpAnalyticsEventsNext
       } = featureFlags;
-      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(EditorSmartCardEvents, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EditorSmartCardEvents, {
         editorView: editorView
       }), lpAnalyticsEventsNext && /*#__PURE__*/React.createElement(EditorSmartCardEventsNext, {
         editorView: editorView
+      }), /*#__PURE__*/React.createElement(LayoutButton, {
+        api: api,
+        editorView: editorView,
+        mountPoint: popupsMountPoint,
+        scrollableElement: popupsScrollableElement,
+        boundariesElement: popupsBoundariesElement
       }));
     },
     pluginsOptions: {

package/dist/es2019/plugins/card/nodeviews/datasource.js

@@ -5,6 +5,9 @@ import PropTypes from 'prop-types';
 import { css, jsx } from '@emotion/react';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { DatasourceTableView } from '@atlaskit/link-datasource';
+import { SmartCardSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { calcBreakoutWidthPx } from '@atlaskit/editor-common/utils';
+export const DATASOURCE_INNER_CONTAINER_CLASSNAME = 'datasourceView-content-inner-wrap';
 const containerStyles = css({
   height: '500px',
   overflow: 'auto'
@@ -88,9 +91,43 @@ _defineProperty(DatasourceComponent, "contextTypes", {
   contextAdapter: PropTypes.object
 });
 export class Datasource extends ReactNodeView {
+  constructor(props) {
+    var _props$pluginInjectio, _props$pluginInjectio2, _props$pluginInjectio3, _sharedState$currentS;
+    super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props, undefined, true, undefined, props.hasIntlContext);
+    _defineProperty(this, "calcTableWidth", (layout, containerWidth) => {
+      if (layout === 'center') {
+        return 'inherit';
+      }
+      return calcBreakoutWidthPx(layout, containerWidth);
+    });
+    const sharedState = props === null || props === void 0 ? void 0 : (_props$pluginInjectio = props.pluginInjectionApi) === null || _props$pluginInjectio === void 0 ? void 0 : (_props$pluginInjectio2 = _props$pluginInjectio.dependencies) === null || _props$pluginInjectio2 === void 0 ? void 0 : (_props$pluginInjectio3 = _props$pluginInjectio2.width) === null || _props$pluginInjectio3 === void 0 ? void 0 : _props$pluginInjectio3.sharedState;
+    this.tableWidth = sharedState === null || sharedState === void 0 ? void 0 : (_sharedState$currentS = sharedState.currentState()) === null || _sharedState$currentS === void 0 ? void 0 : _sharedState$currentS.width;
+    sharedState === null || sharedState === void 0 ? void 0 : sharedState.onChange(({
+      nextSharedState
+    }) => {
+      if (nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.width && this.tableWidth !== (nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.width)) {
+        this.tableWidth = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.width;
+        this.update(this.node, []); // required to update the width when page is resized.
+      }
+    });
+  }
+
+  createDomRef() {
+    const domRef = document.createElement('div');
+    domRef.classList.add(SmartCardSharedCssClassName.DATASOURCE_CONTAINER);
+    return domRef;
+  }
   render() {
+    const {
+      attrs
+    } = this.node;
+    const calculatedWidth = this.calcTableWidth(attrs.layout, this.tableWidth);
     return jsx("div", {
-      css: containerStyles
+      className: DATASOURCE_INNER_CONTAINER_CLASSNAME,
+      css: containerStyles,
+      style: {
+        minWidth: calculatedWidth
+      }
     }, jsx(DatasourceComponent, {
       node: this.node,
       view: this.view,

package/dist/es2019/plugins/card/pm-plugins/actions.js

@@ -26,6 +26,22 @@ export const setProvider = cardProvider => tr => cardAction(tr, {
   type: 'SET_PROVIDER',
   provider: cardProvider
 });
+export const setDatasourceTableRef = datasourceTableRef => tr => cardAction(tr, {
+  type: 'SET_DATASOURCE_TABLE_REF',
+  datasourceTableRef
+});
+export const setCardLayout = layout => tr => cardAction(tr, {
+  type: 'SET_CARD_LAYOUT',
+  layout
+});
+export const setCardLayoutAndDatasourceTableRef = ({
+  layout,
+  datasourceTableRef
+}) => tr => cardAction(tr, {
+  type: 'SET_CARD_LAYOUT_AND_DATASOURCE_TABLE_REF',
+  layout,
+  datasourceTableRef
+});
 export const showLinkToolbar = tr => cardAction(tr, {
   type: 'SHOW_LINK_TOOLBAR'
 });

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

@@ -1,4 +1,5 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { NodeSelection } from 'prosemirror-state';
 import rafSchedule from 'raf-schd';
 import { getInlineNodeViewProducer } from '@atlaskit/editor-common/react-node-view';
 import { BlockCard } from '../nodeviews/blockCard';
@@ -9,7 +10,9 @@ import reducer from './reducers';
 import { handleProvider, resolveWithProvider } from './util/resolve';
 import { getNewRequests, getPluginState, getPluginStateWithUpdatedPos } from './util/state';
 import { createAnalyticsQueue, eventsFromTransaction } from './analytics';
-import { Datasource } from '../nodeviews/datasource';
+import { DATASOURCE_INNER_CONTAINER_CLASSNAME, Datasource } from '../nodeviews/datasource';
+import { setDatasourceTableRef, setCardLayoutAndDatasourceTableRef } from './actions';
+import { findDomRefAtPos } from 'prosemirror-utils';
 export { pluginKey } from './plugin-key';
 export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryParams => {
   const {
@@ -36,7 +39,9 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
           smartLinkEvents: undefined,
           smartLinkEventsNext: undefined,
           createAnalyticsEvent,
-          editorAppearance
+          editorAppearance,
+          datasourceTableRef: undefined,
+          layout: undefined
         };
       },
       apply(tr, pluginState, prevEditorState) {
@@ -60,12 +65,48 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
     },
     view(view) {
       const subscriptionHandler = (name, provider) => handleProvider(name, provider, view);
+      const domAtPos = view.domAtPos.bind(view);
       const rafCancellationCallbacks = [];
       pmPluginFactoryParams.providerFactory.subscribe('cardProvider', subscriptionHandler);
       return {
         update(view, prevState) {
+          var _selection$node;
           const currentState = getPluginState(view.state);
           const oldState = getPluginState(prevState);
+          const {
+            state,
+            dispatch
+          } = view;
+          const {
+            selection,
+            tr,
+            schema
+          } = state;
+          const isBlockCardSelected = selection instanceof NodeSelection && ((_selection$node = selection.node) === null || _selection$node === void 0 ? void 0 : _selection$node.type) === schema.nodes.blockCard;
+          if (isBlockCardSelected) {
+            var _findDomRefAtPos, _node$attrs;
+            const datasourceTableRef = (_findDomRefAtPos = findDomRefAtPos(selection.from, domAtPos)) === null || _findDomRefAtPos === void 0 ? void 0 : _findDomRefAtPos.querySelector(`.${DATASOURCE_INNER_CONTAINER_CLASSNAME}`);
+            const {
+              node
+            } = selection;
+            const isDatasource = !!(node !== null && node !== void 0 && (_node$attrs = node.attrs) !== null && _node$attrs !== void 0 && _node$attrs.datasource);
+            const shouldUpdateTableRef = datasourceTableRef && (currentState === null || currentState === void 0 ? void 0 : currentState.datasourceTableRef) !== datasourceTableRef;
+            if (isDatasource && shouldUpdateTableRef) {
+              var _node$attrs2;
+              // since we use the plugin state, which is a shared state, we need to update the datasourceTableRef, layout on each selection
+              const layout = (node === null || node === void 0 ? void 0 : (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.layout) || 'center';
+
+              // we use cardAction to set the same meta, hence, we will need to combine both layout+datasourceTableRef in one transaction
+              dispatch(setCardLayoutAndDatasourceTableRef({
+                datasourceTableRef,
+                layout
+              })(tr));
+            }
+          } else {
+            if (currentState !== null && currentState !== void 0 && currentState.datasourceTableRef) {
+              dispatch(setDatasourceTableRef(undefined)(tr));
+            }
+          }
           if (currentState && currentState.provider) {
             // Find requests in this state that weren't in the old one.
             const newRequests = getNewRequests(oldState, currentState);
@@ -111,6 +152,7 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
           }
         }),
         blockCard: (node, view, getPos) => {
+          var _node$attrs3;
           const {
             portalProviderAPI,
             eventDispatcher
@@ -120,8 +162,17 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
             showServerActions
           };
           const hasIntlContext = true;
-          if (node.attrs.datasource) {
-            return new Datasource(node, view, getPos, portalProviderAPI, eventDispatcher, undefined, undefined, true, undefined, hasIntlContext).init();
+          const isDatasource = !!(node !== null && node !== void 0 && (_node$attrs3 = node.attrs) !== null && _node$attrs3 !== void 0 && _node$attrs3.datasource);
+          if (isDatasource) {
+            return new Datasource({
+              node,
+              view,
+              getPos,
+              portalProviderAPI,
+              eventDispatcher,
+              hasIntlContext,
+              pluginInjectionApi
+            }).init();
           }
           return new BlockCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined, true, undefined, hasIntlContext).init();
         },

package/dist/es2019/plugins/card/pm-plugins/reducers.js

@@ -28,6 +28,25 @@ const setProvider = (state, action) => {
     provider: action.provider
   };
 };
+const setCardLayout = (state, action) => {
+  return {
+    ...state,
+    layout: action.layout
+  };
+};
+const setDatasourceTableRef = (state, action) => {
+  return {
+    ...state,
+    datasourceTableRef: action.datasourceTableRef
+  };
+};
+const setCardLayoutDatasourceTableRef = (state, action) => {
+  return {
+    ...state,
+    datasourceTableRef: action.datasourceTableRef,
+    layout: action.layout
+  };
+};
 const registerEvents = (state, action) => {
   return {
     ...state,
@@ -60,6 +79,12 @@ export default ((state, action) => {
       return registerEvents(state, action);
     case 'REGISTER_EVENTS_NEXT':
       return registerEventsNext(state, action);
+    case 'SET_DATASOURCE_TABLE_REF':
+      return setDatasourceTableRef(state, action);
+    case 'SET_CARD_LAYOUT':
+      return setCardLayout(state, action);
+    case 'SET_CARD_LAYOUT_AND_DATASOURCE_TABLE_REF':
+      return setCardLayoutDatasourceTableRef(state, action);
     case 'SHOW_LINK_TOOLBAR':
     case 'HIDE_LINK_TOOLBAR':
       return setLinkToolbar(state, action);

package/dist/es2019/plugins/card/styles.js

@@ -67,6 +67,12 @@ export const smartCardStyles = css`
     }
   }
 
+  .${SmartCardSharedCssClassName.DATASOURCE_CONTAINER}.${SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER} {
+    max-width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
   .${SmartCardSharedCssClassName.EMBED_CARD_CONTAINER} {
     .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div {
       cursor: pointer;

package/dist/es2019/plugins/card/ui/LayoutButton/index.js

@@ -0,0 +1,106 @@
+/** @jsx jsx */
+import React, { useCallback, useMemo } from 'react';
+import { jsx } from '@emotion/react';
+import { Popup } from '@atlaskit/editor-common/ui';
+import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import CollapseIcon from '@atlaskit/icon/glyph/editor/collapse';
+import ExpandIcon from '@atlaskit/icon/glyph/editor/expand';
+import { injectIntl } from 'react-intl-next';
+import { toolbarButtonWrapper } from './styled';
+import { getDatasource } from './utils';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { setCardLayout } from '../../pm-plugins/actions';
+import { getNextBreakoutMode, getTitle } from '@atlaskit/editor-common/utils';
+export const LayoutButton = ({
+  onLayoutChange,
+  layout = 'center',
+  intl: {
+    formatMessage
+  },
+  mountPoint,
+  boundariesElement,
+  scrollableElement,
+  targetElement,
+  testId = 'datasource-table-layout-button'
+}) => {
+  const handleClick = useCallback(() => {
+    onLayoutChange && onLayoutChange(getNextBreakoutMode(layout));
+  }, [layout, onLayoutChange]);
+  const title = useMemo(() => {
+    return formatMessage(getTitle(layout));
+  }, [formatMessage, layout]);
+  if (!targetElement) {
+    return null;
+  }
+  return jsx(Popup, {
+    mountTo: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    target: targetElement,
+    alignY: "start",
+    alignX: "end",
+    forcePlacement: true,
+    stick: true,
+    ariaLabel: title
+  }, jsx(ToolbarButton, {
+    testId: testId,
+    css: toolbarButtonWrapper,
+    title: title,
+    onClick: handleClick,
+    iconBefore: layout === 'full-width' ? jsx(CollapseIcon, {
+      label: title
+    }) : jsx(ExpandIcon, {
+      label: title
+    })
+  }));
+};
+const LayoutButtonWrapper = ({
+  editorView,
+  mountPoint,
+  scrollableElement,
+  boundariesElement,
+  intl,
+  api
+}) => {
+  var _node$attrs, _node$attrs2;
+  const {
+    cardState
+  } = useSharedPluginState(api, ['card']);
+  const {
+    node,
+    pos
+  } = getDatasource(editorView);
+  const {
+    datasourceTableRef,
+    layout = (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.layout) || 'center'
+  } = cardState !== null && cardState !== void 0 ? cardState : {};
+  const isDatasource = !!(node !== null && node !== void 0 && (_node$attrs2 = node.attrs) !== null && _node$attrs2 !== void 0 && _node$attrs2.datasource);
+  const onLayoutChange = layout => {
+    if (pos === undefined) {
+      return;
+    }
+    const {
+      state,
+      dispatch
+    } = editorView;
+    const tr = state.tr.setNodeMarkup(pos, undefined, {
+      ...(node === null || node === void 0 ? void 0 : node.attrs),
+      layout
+    });
+    tr.setMeta('scrollIntoView', false);
+    dispatch(setCardLayout(layout)(tr));
+  };
+  if (!isDatasource) {
+    return null;
+  }
+  return jsx(LayoutButton, {
+    mountPoint: mountPoint,
+    scrollableElement: scrollableElement,
+    boundariesElement: boundariesElement,
+    targetElement: datasourceTableRef,
+    layout: layout,
+    onLayoutChange: onLayoutChange,
+    intl: intl
+  });
+};
+export default injectIntl(LayoutButtonWrapper);

package/dist/es2019/plugins/card/ui/LayoutButton/styled.js

@@ -0,0 +1,10 @@
+import { css } from '@emotion/react';
+import { B300, N300, N20A } from '@atlaskit/theme/colors';
+export const toolbarButtonWrapper = css({
+  background: `${`var(--ds-background-neutral, ${N20A})`}`,
+  color: `${`var(--ds-icon, ${N300})`}`,
+  ':hover': {
+    background: `${`var(--ds-background-neutral-hovered, ${B300})`}`,
+    color: `${"var(--ds-icon, white)"} !important`
+  }
+});

package/dist/es2019/plugins/card/ui/LayoutButton/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/plugins/card/ui/LayoutButton/utils.js

@@ -0,0 +1,15 @@
+import { findSelectedNodeOfType } from 'prosemirror-utils';
+export const getDatasource = editorView => {
+  var _findSelectedNodeOfTy;
+  const {
+    selection,
+    schema
+  } = editorView.state;
+  const {
+    blockCard
+  } = schema.nodes;
+  return (_findSelectedNodeOfTy = findSelectedNodeOfType([blockCard])(selection)) !== null && _findSelectedNodeOfTy !== void 0 ? _findSelectedNodeOfTy : {
+    node: undefined,
+    pos: undefined
+  };
+};

package/dist/es2019/plugins/hyperlink/ui/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -656,6 +656,7 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
     // for details: https://a11y-internal.atlassian.net/browse/AK-740
     const screenReaderText = browser.safari && this.getScreenReaderText();
     return jsx("div", {
+      "aria-label": "Hyperlink Edit",
       className: "recent-list"
     }, jsx("div", {
       css: [container, !!activityProvider && containerWithProvider],

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

@@ -2,12 +2,12 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { NodeSelection, TextSelection, AllSelection } from 'prosemirror-state';
+import { NodeSelection, TextSelection, AllSelection, Selection } from 'prosemirror-state';
 import { insertPoint } from 'prosemirror-transform';
 import { Decoration, DecorationSet } from 'prosemirror-view';
 import { ErrorReporter, browser } from '@atlaskit/editor-common/utils';
 import assert from 'assert';
-import { findDomRefAtPos, isNodeSelection } from 'prosemirror-utils';
+import { findDomRefAtPos, isNodeSelection, findSelectedNodeOfType, findParentNodeOfType } from 'prosemirror-utils';
 import { insertMediaSingleNode, isMediaSingle } from '../utils/media-single';
 import DropPlaceholder from '../ui/Media/DropPlaceholder';
 import { insertMediaGroupNode, insertMediaInlineNode, canInsertMediaInline } from '../utils/media-files';
@@ -379,8 +379,30 @@ export class MediaPluginStateImplementation {
         dispatch,
         state
       } = this.view;
+      const {
+        tr,
+        selection,
+        doc
+      } = state;
+      const {
+        media,
+        mediaGroup
+      } = state.schema.nodes;
+
+      // Workaround for wrong upload position
+      // @see https://product-fabric.atlassian.net/browse/MEX-2457
+      // If the media node is the last selectable item in the current cursor position and it is located within a mediaGroup,
+      // we relocate the cursor to the first child of the mediaGroup.
+      const sel = Selection.findFrom(doc.resolve(selection.$from.pos - 1), -1);
+      if (sel && findSelectedNodeOfType(media)(sel)) {
+        const parent = findParentNodeOfType(mediaGroup)(sel);
+        if (parent) {
+          tr.setSelection(NodeSelection.create(tr.doc, parent.start));
+        }
+      }
+
       // Trigger state change to be able to pick it up in the decorations handler
-      dispatch(state.tr);
+      dispatch(tr);
     });
     this.options = options;
     this.mediaOptions = mediaOptions;

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "185.5.0";
+export const version = "185.5.5";
 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": "185.5.0",
+	"version": "185.5.5",
 	"sideEffects": false
 }

package/dist/esm/plugins/breakout/ui/LayoutButton.js

@@ -22,37 +22,14 @@ import ToolbarButton from '../../../ui/ToolbarButton';
 import { getBreakoutMode } from '../utils/get-breakout-mode';
 import { setBreakoutMode } from '../commands/set-breakout-mode';
 import { removeBreakout } from '../commands/remove-breakout';
-import commonMessages from '../../../messages';
 import { BreakoutCssClassName } from '../constants';
 import { isBreakoutMarkAllowed } from '../utils/is-breakout-mark-allowed';
 import { getPluginState } from '../plugin-key';
 import { NodeSelection } from 'prosemirror-state';
 import { isSupportedNodeForBreakout } from '../utils/is-supported-node';
 import { layers } from '@atlaskit/theme/constants';
+import { getNextBreakoutMode, getTitle } from '@atlaskit/editor-common/utils';
 var toolbarButtonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  && button {\n    background: ", ";\n    color: ", ";\n    :hover {\n      background: ", ";\n      color: ", " !important;\n    }\n  }\n"])), "var(--ds-background-neutral, ".concat(N20A, ")"), "var(--ds-icon, ".concat(N300, ")"), "var(--ds-background-neutral-hovered, ".concat(B300, ")"), "var(--ds-icon, white)");
-var BREAKOUT_MODE = {
-  FULL_WIDTH: 'full-width',
-  CENTER: 'center',
-  WIDE: 'wide'
-};
-var getNextBreakoutMode = function getNextBreakoutMode(currentMode) {
-  if (currentMode === BREAKOUT_MODE.FULL_WIDTH) {
-    return BREAKOUT_MODE.CENTER;
-  } else if (currentMode === BREAKOUT_MODE.WIDE) {
-    return BREAKOUT_MODE.FULL_WIDTH;
-  }
-  return BREAKOUT_MODE.WIDE;
-};
-var getTitle = function getTitle(layout) {
-  switch (layout) {
-    case BREAKOUT_MODE.FULL_WIDTH:
-      return commonMessages.layoutFixedWidth;
-    case BREAKOUT_MODE.WIDE:
-      return commonMessages.layoutFullWidth;
-    default:
-      return commonMessages.layoutWide;
-  }
-};
 function getBreakoutNodeElement(pluginState, selection, editorView) {
   if (selection instanceof NodeSelection && isSupportedNodeForBreakout(selection.node)) {
     return findDomRefAtPos(selection.from, editorView.domAtPos.bind(editorView));
@@ -74,7 +51,7 @@ var LayoutButton = /*#__PURE__*/function (_React$Component) {
         var _this$props$editorVie = _this.props.editorView,
           state = _this$props$editorVie.state,
           dispatch = _this$props$editorVie.dispatch;
-        if ([BREAKOUT_MODE.WIDE, BREAKOUT_MODE.FULL_WIDTH].indexOf(breakoutMode) !== -1) {
+        if (['wide', 'full-width'].indexOf(breakoutMode) !== -1) {
           setBreakoutMode(breakoutMode)(state, dispatch);
         } else {
           removeBreakout()(state, dispatch);
@@ -129,7 +106,7 @@ var LayoutButton = /*#__PURE__*/function (_React$Component) {
         title: title,
         testId: titleMessage.id,
         onClick: this.handleClick(nextBreakoutMode),
-        iconBefore: breakoutMode === BREAKOUT_MODE.FULL_WIDTH ? jsx(CollapseIcon, {
+        iconBefore: breakoutMode === 'full-width' ? jsx(CollapseIcon, {
           label: title
         }) : jsx(ExpandIcon, {
           label: title

package/dist/esm/plugins/breakout/utils/get-breakout-mode.js

@@ -1,5 +1,4 @@
 import { findSupportedNodeForBreakout } from './find-breakout-node';
-
 /**
  * Get the current mode of the breakout at the selection
  * @param state Current EditorState