@atlaskit/editor-plugin-media 0.4.4 → 0.4.6

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @atlaskit/editor-plugin-media
 
+## 0.4.6
+
+### Patch Changes
+
+- [#43825](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43825) [`b21c6c1caa8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b21c6c1caa8) - [ux] [ED-20885] Group layout buttons in mediaSingle floating toolbar into a dropdown
+
+## 0.4.5
+
+### Patch Changes
+
+- [#43646](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43646) [`d43f8e9402f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d43f8e9402f) - Make feature flags plugin optional in all plugins including:
+
+  - analytics
+  - base
+  - card
+  - code-block
+  - expand
+  - extension
+  - floating-toolbar
+  - hyperlink
+  - insert-block
+  - layout
+  - layout
+  - list
+  - media
+  - paste
+  - rule
+  - table
+  - tasks-and-decisions
+
+  We already treat it as optional in the plugins, so this is just ensuring that the plugin is not mandatory to be added to the preset.
+
 ## 0.4.4
 
 ### Patch Changes

package/dist/cjs/toolbar/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.floatingToolbar = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
@@ -34,6 +35,7 @@ var _altText2 = require("./alt-text");
 var _commands = require("./commands");
 var _filePreviewItem = require("./filePreviewItem");
 var _imageBorder = require("./imageBorder");
+var _layoutGroup = require("./layout-group");
 var _linking3 = require("./linking");
 var _linkingToolbarAppearance = require("./linking-toolbar-appearance");
 var _utils2 = require("./utils");
@@ -244,21 +246,47 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     var _pluginInjectionApi$a3;
     var widthPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.width;
     var isChangingLayoutDisabled = false;
+    var selectedNode = (0, _utils2.getSelectedMediaSingle)(state);
     if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience')) {
       var _widthPlugin$sharedSt;
       var contentWidth = widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt === void 0 ? void 0 : _widthPlugin$sharedSt.lineLength;
-      var selectedNode = (0, _utils2.getSelectedMediaSingle)(state);
       var selectedNodeMaxWidth = pluginState.currentMaxWidth || contentWidth;
       if (selectedNode && selectedNodeMaxWidth && selectedNode.node.attrs.width >= selectedNodeMaxWidth) {
         isChangingLayoutDisabled = true;
       }
     }
     var layoutButtons = (0, _card.buildLayoutButtons)(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled);
-    toolbarButtons = [].concat((0, _toConsumableArray2.default)(toolbarButtons), (0, _toConsumableArray2.default)(layoutButtons));
-    if (layoutButtons.length) {
-      toolbarButtons.push({
-        type: 'separator'
-      });
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.grouped-layout') && selectedNode) {
+      var selectedLayoutIcon = (0, _utils2.getSelectedLayoutIcon)([].concat((0, _toConsumableArray2.default)(_card.alignmentIcons), (0, _toConsumableArray2.default)(_card.wrappingIcons)), selectedNode.node);
+      if (selectedLayoutIcon && layoutButtons.length) {
+        var _options = {
+          render: function render(props) {
+            return /*#__PURE__*/_react.default.createElement(_layoutGroup.LayoutGroup, (0, _extends2.default)({
+              layoutButtons: layoutButtons
+            }, props));
+          },
+          width: 156,
+          height: 32
+        };
+        var trigger = {
+          id: 'media-single-layout',
+          testId: 'media-single-layout-dropdown-trigger',
+          type: 'dropdown',
+          options: _options,
+          title: intl.formatMessage(_card.layoutToMessages[selectedLayoutIcon.value]),
+          icon: selectedLayoutIcon.icon
+        };
+        toolbarButtons = [].concat((0, _toConsumableArray2.default)(toolbarButtons), [trigger, {
+          type: 'separator'
+        }]);
+      }
+    } else {
+      toolbarButtons = [].concat((0, _toConsumableArray2.default)(toolbarButtons), (0, _toConsumableArray2.default)(layoutButtons));
+      if (layoutButtons.length) {
+        toolbarButtons.push({
+          type: 'separator'
+        });
+      }
     }
 
     // Pixel Entry Toolbar Support

package/dist/cjs/toolbar/layout-group.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LayoutGroup = void 0;
+var _react = require("@emotion/react");
+var _button = require("@atlaskit/button");
+var _ui = require("@atlaskit/editor-common/ui");
+/** @jsx jsx */
+
+var containerStyles = (0, _react.css)({
+  marginLeft: "var(--ds-space-100, 8px)"
+});
+var LayoutGroup = exports.LayoutGroup = function LayoutGroup(_ref) {
+  var layoutButtons = _ref.layoutButtons,
+    dispatchCommand = _ref.dispatchCommand,
+    hide = _ref.hide;
+  return (0, _react.jsx)("div", {
+    css: containerStyles
+  }, (0, _react.jsx)(_button.ButtonGroup, null, layoutButtons.map(function (item, idx) {
+    switch (item.type) {
+      case 'separator':
+        return (0, _react.jsx)(_ui.FloatingToolbarSeparator, {
+          key: idx
+        });
+      case 'button':
+        var ButtonIcon = item.icon;
+        return (0, _react.jsx)(_ui.FloatingToolbarButton, {
+          key: idx,
+          icon: item.icon ? (0, _react.jsx)(ButtonIcon, {
+            label: item.title
+          }) : undefined,
+          title: item.title,
+          selected: item.selected,
+          disabled: item.disabled,
+          onClick: function onClick() {
+            dispatchCommand(item.onClick);
+            hide();
+          }
+        });
+    }
+  })));
+};

package/dist/cjs/toolbar/utils.js

@@ -4,12 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.removeMediaGroupNode = exports.getSelectedMediaSingle = exports.getSelectedMediaContainerNodeAttrs = exports.getPixelWidthOfElement = exports.getMaxToolbarWidth = exports.downloadMedia = exports.calcNewLayout = void 0;
+exports.removeMediaGroupNode = exports.getSelectedMediaSingle = exports.getSelectedMediaContainerNodeAttrs = exports.getSelectedLayoutIcon = exports.getPixelWidthOfElement = exports.getMaxToolbarWidth = exports.downloadMedia = exports.calcNewLayout = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _mediaSingle = require("@atlaskit/editor-common/media-single");
-var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _utils = require("@atlaskit/editor-common/utils");
+var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _mediaClientReact = require("@atlaskit/media-client-react");
 var getSelectedMediaContainerNodeAttrs = exports.getSelectedMediaContainerNodeAttrs = function getSelectedMediaContainerNodeAttrs(mediaPluginState) {
@@ -59,19 +60,19 @@ var downloadMedia = exports.downloadMedia = /*#__PURE__*/function () {
 }();
 var removeMediaGroupNode = exports.removeMediaGroupNode = function removeMediaGroupNode(state) {
   var mediaGroup = state.schema.nodes.mediaGroup;
-  var mediaGroupParent = (0, _utils.findParentNodeOfType)(mediaGroup)(state.selection);
+  var mediaGroupParent = (0, _utils2.findParentNodeOfType)(mediaGroup)(state.selection);
   var tr = state.tr;
   // If it is the last media group in filmstrip, remove the entire filmstrip
   if (mediaGroupParent && mediaGroupParent.node.childCount === 1) {
-    tr = (0, _utils.removeParentNodeOfType)(mediaGroup)(tr);
+    tr = (0, _utils2.removeParentNodeOfType)(mediaGroup)(tr);
   } else {
-    tr = (0, _utils.removeSelectedNode)(tr);
+    tr = (0, _utils2.removeSelectedNode)(tr);
   }
   return tr;
 };
 var getSelectedMediaSingle = exports.getSelectedMediaSingle = function getSelectedMediaSingle(state) {
   var mediaSingle = state.schema.nodes.mediaSingle;
-  return (0, _utils.findSelectedNodeOfType)(mediaSingle)(state.selection) || (0, _utils.findParentNodeOfType)(mediaSingle)(state.selection);
+  return (0, _utils2.findSelectedNodeOfType)(mediaSingle)(state.selection) || (0, _utils2.findParentNodeOfType)(mediaSingle)(state.selection);
 };
 var getPixelWidthOfElement = exports.getPixelWidthOfElement = (0, _memoizeOne.default)(function (editorView, pos, mediaWidth) {
   var domNode = editorView.nodeDOM(pos);
@@ -111,4 +112,10 @@ var getMaxToolbarWidth = exports.getMaxToolbarWidth = function getMaxToolbarWidt
     maxToolbarFitWidth = toolbarWidth;
   }
   return maxToolbarFitWidth;
+};
+var getSelectedLayoutIcon = exports.getSelectedLayoutIcon = function getSelectedLayoutIcon(layoutIcons, selectedNode) {
+  var selectedLayout = selectedNode.attrs.layout;
+  return layoutIcons.find(function (icon) {
+    return icon.value === (_utils.nonWrappedLayouts.includes(selectedLayout) ? 'center' : selectedLayout);
+  });
 };

package/dist/es2019/toolbar/index.js

@@ -1,6 +1,7 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { buildLayoutButtons } from '@atlaskit/editor-common/card';
+import { alignmentIcons, buildLayoutButtons, layoutToMessages, wrappingIcons } 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';
@@ -24,9 +25,10 @@ import { altTextButton, getAltTextToolbar } from './alt-text';
 import { changeInlineToMediaCard, changeMediaCardToInline, removeInlineCard, setBorderMark, toggleBorderMark, updateMediaSingleWidth } from './commands';
 import { FilePreviewItem } from './filePreviewItem';
 import { shouldShowImageBorder } from './imageBorder';
+import { LayoutGroup } from './layout-group';
 import { getLinkingToolbar, shouldShowMediaLinkToolbar } from './linking';
 import { LinkToolbarAppearance } from './linking-toolbar-appearance';
-import { calcNewLayout, downloadMedia, getMaxToolbarWidth, getPixelWidthOfElement, getSelectedMediaSingle, removeMediaGroupNode } from './utils';
+import { calcNewLayout, downloadMedia, getMaxToolbarWidth, getPixelWidthOfElement, getSelectedLayoutIcon, getSelectedMediaSingle, removeMediaGroupNode } from './utils';
 const remove = (state, dispatch) => {
   if (dispatch) {
     dispatch(removeSelectedNode(state.tr));
@@ -241,21 +243,47 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
     var _pluginInjectionApi$a3;
     const widthPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.width;
     let isChangingLayoutDisabled = false;
+    const selectedNode = getSelectedMediaSingle(state);
     if (getBooleanFF('platform.editor.media.extended-resize-experience')) {
       var _widthPlugin$sharedSt;
       const contentWidth = widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt === void 0 ? void 0 : _widthPlugin$sharedSt.lineLength;
-      const selectedNode = getSelectedMediaSingle(state);
       const selectedNodeMaxWidth = pluginState.currentMaxWidth || contentWidth;
       if (selectedNode && selectedNodeMaxWidth && selectedNode.node.attrs.width >= selectedNodeMaxWidth) {
         isChangingLayoutDisabled = true;
       }
     }
     const layoutButtons = buildLayoutButtons(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled);
-    toolbarButtons = [...toolbarButtons, ...layoutButtons];
-    if (layoutButtons.length) {
-      toolbarButtons.push({
-        type: 'separator'
-      });
+    if (getBooleanFF('platform.editor.media.grouped-layout') && selectedNode) {
+      const selectedLayoutIcon = getSelectedLayoutIcon([...alignmentIcons, ...wrappingIcons], selectedNode.node);
+      if (selectedLayoutIcon && layoutButtons.length) {
+        const options = {
+          render: props => {
+            return /*#__PURE__*/React.createElement(LayoutGroup, _extends({
+              layoutButtons: layoutButtons
+            }, props));
+          },
+          width: 156,
+          height: 32
+        };
+        const trigger = {
+          id: 'media-single-layout',
+          testId: 'media-single-layout-dropdown-trigger',
+          type: 'dropdown',
+          options: options,
+          title: intl.formatMessage(layoutToMessages[selectedLayoutIcon.value]),
+          icon: selectedLayoutIcon.icon
+        };
+        toolbarButtons = [...toolbarButtons, trigger, {
+          type: 'separator'
+        }];
+      }
+    } else {
+      toolbarButtons = [...toolbarButtons, ...layoutButtons];
+      if (layoutButtons.length) {
+        toolbarButtons.push({
+          type: 'separator'
+        });
+      }
     }
 
     // Pixel Entry Toolbar Support

package/dist/es2019/toolbar/layout-group.js

@@ -0,0 +1,38 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import { ButtonGroup } from '@atlaskit/button';
+import { FloatingToolbarButton as Button, FloatingToolbarSeparator } from '@atlaskit/editor-common/ui';
+const containerStyles = css({
+  marginLeft: "var(--ds-space-100, 8px)"
+});
+export const LayoutGroup = ({
+  layoutButtons,
+  dispatchCommand,
+  hide
+}) => {
+  return jsx("div", {
+    css: containerStyles
+  }, jsx(ButtonGroup, null, layoutButtons.map((item, idx) => {
+    switch (item.type) {
+      case 'separator':
+        return jsx(FloatingToolbarSeparator, {
+          key: idx
+        });
+      case 'button':
+        const ButtonIcon = item.icon;
+        return jsx(Button, {
+          key: idx,
+          icon: item.icon ? jsx(ButtonIcon, {
+            label: item.title
+          }) : undefined,
+          title: item.title,
+          selected: item.selected,
+          disabled: item.disabled,
+          onClick: () => {
+            dispatchCommand(item.onClick);
+            hide();
+          }
+        });
+    }
+  })));
+};

package/dist/es2019/toolbar/utils.js

@@ -1,5 +1,6 @@
 import memoizeOne from 'memoize-one';
 import { wrappedLayouts } from '@atlaskit/editor-common/media-single';
+import { nonWrappedLayouts } from '@atlaskit/editor-common/utils';
 import { findParentNodeOfType, findSelectedNodeOfType, removeParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { getMediaClient } from '@atlaskit/media-client-react';
@@ -86,4 +87,8 @@ export const getMaxToolbarWidth = () => {
     maxToolbarFitWidth = toolbarWidth;
   }
   return maxToolbarFitWidth;
+};
+export const getSelectedLayoutIcon = (layoutIcons, selectedNode) => {
+  const selectedLayout = selectedNode.attrs.layout;
+  return layoutIcons.find(icon => icon.value === (nonWrappedLayouts.includes(selectedLayout) ? 'center' : selectedLayout));
 };

package/dist/esm/toolbar/index.js

@@ -1,10 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { buildLayoutButtons } from '@atlaskit/editor-common/card';
+import { alignmentIcons, buildLayoutButtons, layoutToMessages, wrappingIcons } 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';
@@ -28,9 +29,10 @@ import { altTextButton, getAltTextToolbar } from './alt-text';
 import { changeInlineToMediaCard, changeMediaCardToInline, removeInlineCard, setBorderMark, toggleBorderMark, updateMediaSingleWidth } from './commands';
 import { FilePreviewItem } from './filePreviewItem';
 import { shouldShowImageBorder } from './imageBorder';
+import { LayoutGroup } from './layout-group';
 import { getLinkingToolbar, shouldShowMediaLinkToolbar } from './linking';
 import { LinkToolbarAppearance } from './linking-toolbar-appearance';
-import { calcNewLayout, downloadMedia, getMaxToolbarWidth, getPixelWidthOfElement, getSelectedMediaSingle, removeMediaGroupNode } from './utils';
+import { calcNewLayout, downloadMedia, getMaxToolbarWidth, getPixelWidthOfElement, getSelectedLayoutIcon, getSelectedMediaSingle, removeMediaGroupNode } from './utils';
 var remove = function remove(state, dispatch) {
   if (dispatch) {
     dispatch(removeSelectedNode(state.tr));
@@ -234,21 +236,47 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     var _pluginInjectionApi$a3;
     var widthPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.width;
     var isChangingLayoutDisabled = false;
+    var selectedNode = getSelectedMediaSingle(state);
     if (getBooleanFF('platform.editor.media.extended-resize-experience')) {
       var _widthPlugin$sharedSt;
       var contentWidth = widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt === void 0 ? void 0 : _widthPlugin$sharedSt.lineLength;
-      var selectedNode = getSelectedMediaSingle(state);
       var selectedNodeMaxWidth = pluginState.currentMaxWidth || contentWidth;
       if (selectedNode && selectedNodeMaxWidth && selectedNode.node.attrs.width >= selectedNodeMaxWidth) {
         isChangingLayoutDisabled = true;
       }
     }
     var layoutButtons = buildLayoutButtons(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled);
-    toolbarButtons = [].concat(_toConsumableArray(toolbarButtons), _toConsumableArray(layoutButtons));
-    if (layoutButtons.length) {
-      toolbarButtons.push({
-        type: 'separator'
-      });
+    if (getBooleanFF('platform.editor.media.grouped-layout') && selectedNode) {
+      var selectedLayoutIcon = getSelectedLayoutIcon([].concat(_toConsumableArray(alignmentIcons), _toConsumableArray(wrappingIcons)), selectedNode.node);
+      if (selectedLayoutIcon && layoutButtons.length) {
+        var _options = {
+          render: function render(props) {
+            return /*#__PURE__*/React.createElement(LayoutGroup, _extends({
+              layoutButtons: layoutButtons
+            }, props));
+          },
+          width: 156,
+          height: 32
+        };
+        var trigger = {
+          id: 'media-single-layout',
+          testId: 'media-single-layout-dropdown-trigger',
+          type: 'dropdown',
+          options: _options,
+          title: intl.formatMessage(layoutToMessages[selectedLayoutIcon.value]),
+          icon: selectedLayoutIcon.icon
+        };
+        toolbarButtons = [].concat(_toConsumableArray(toolbarButtons), [trigger, {
+          type: 'separator'
+        }]);
+      }
+    } else {
+      toolbarButtons = [].concat(_toConsumableArray(toolbarButtons), _toConsumableArray(layoutButtons));
+      if (layoutButtons.length) {
+        toolbarButtons.push({
+          type: 'separator'
+        });
+      }
     }
 
     // Pixel Entry Toolbar Support

package/dist/esm/toolbar/layout-group.js

@@ -0,0 +1,37 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import { ButtonGroup } from '@atlaskit/button';
+import { FloatingToolbarButton as Button, FloatingToolbarSeparator } from '@atlaskit/editor-common/ui';
+var containerStyles = css({
+  marginLeft: "var(--ds-space-100, 8px)"
+});
+export var LayoutGroup = function LayoutGroup(_ref) {
+  var layoutButtons = _ref.layoutButtons,
+    dispatchCommand = _ref.dispatchCommand,
+    hide = _ref.hide;
+  return jsx("div", {
+    css: containerStyles
+  }, jsx(ButtonGroup, null, layoutButtons.map(function (item, idx) {
+    switch (item.type) {
+      case 'separator':
+        return jsx(FloatingToolbarSeparator, {
+          key: idx
+        });
+      case 'button':
+        var ButtonIcon = item.icon;
+        return jsx(Button, {
+          key: idx,
+          icon: item.icon ? jsx(ButtonIcon, {
+            label: item.title
+          }) : undefined,
+          title: item.title,
+          selected: item.selected,
+          disabled: item.disabled,
+          onClick: function onClick() {
+            dispatchCommand(item.onClick);
+            hide();
+          }
+        });
+    }
+  })));
+};

package/dist/esm/toolbar/utils.js

@@ -2,6 +2,7 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import memoizeOne from 'memoize-one';
 import { wrappedLayouts } from '@atlaskit/editor-common/media-single';
+import { nonWrappedLayouts } from '@atlaskit/editor-common/utils';
 import { findParentNodeOfType, findSelectedNodeOfType, removeParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { getMediaClient } from '@atlaskit/media-client-react';
@@ -104,4 +105,10 @@ export var getMaxToolbarWidth = function getMaxToolbarWidth() {
     maxToolbarFitWidth = toolbarWidth;
   }
   return maxToolbarFitWidth;
+};
+export var getSelectedLayoutIcon = function getSelectedLayoutIcon(layoutIcons, selectedNode) {
+  var selectedLayout = selectedNode.attrs.layout;
+  return layoutIcons.find(function (icon) {
+    return icon.value === (nonWrappedLayouts.includes(selectedLayout) ? 'center' : selectedLayout);
+  });
 };

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

@@ -15,7 +15,7 @@ import type { InsertMediaAsMediaSingle } from './utils/media-single';
 export type MediaNextEditorPluginType = NextEditorPlugin<'media', {
     pluginConfiguration: MediaOptions | undefined;
     dependencies: [
-        FeatureFlagsPlugin,
+        OptionalPlugin<FeatureFlagsPlugin>,
         OptionalPlugin<AnalyticsPlugin>,
         GuidelinePlugin,
         GridPlugin,

package/dist/types/toolbar/layout-group.d.ts

@@ -0,0 +1,10 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import type { Command, FloatingToolbarItem } from '@atlaskit/editor-common/types';
+type Props = {
+    layoutButtons: FloatingToolbarItem<Command>[];
+    dispatchCommand: (command: Command) => void;
+    hide: () => void;
+};
+export declare const LayoutGroup: ({ layoutButtons, dispatchCommand, hide, }: Props) => jsx.JSX.Element;
+export {};

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

@@ -1,4 +1,6 @@
 import type { MediaBaseAttributes, RichMediaLayout } from '@atlaskit/adf-schema';
+import type { LayoutIcon } from '@atlaskit/editor-common/card';
+import type { Node as ProseMirrorNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { MediaPluginState } from '../pm-plugins/types';
@@ -9,3 +11,4 @@ export declare const getSelectedMediaSingle: (state: EditorState) => import("pro
 export declare const getPixelWidthOfElement: import("memoize-one").MemoizedFn<(editorView: EditorView, pos: number, mediaWidth: number) => number>;
 export declare const calcNewLayout: (width: number, layout: RichMediaLayout, contentWidth: number, fullWidthMode?: boolean, isNested?: boolean) => RichMediaLayout;
 export declare const getMaxToolbarWidth: () => number;
+export declare const getSelectedLayoutIcon: (layoutIcons: LayoutIcon[], selectedNode: ProseMirrorNode) => LayoutIcon | undefined;

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

@@ -15,7 +15,7 @@ import type { InsertMediaAsMediaSingle } from './utils/media-single';
 export type MediaNextEditorPluginType = NextEditorPlugin<'media', {
     pluginConfiguration: MediaOptions | undefined;
     dependencies: [
-        FeatureFlagsPlugin,
+        OptionalPlugin<FeatureFlagsPlugin>,
         OptionalPlugin<AnalyticsPlugin>,
         GuidelinePlugin,
         GridPlugin,

package/dist/types-ts4.5/toolbar/layout-group.d.ts

@@ -0,0 +1,10 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import type { Command, FloatingToolbarItem } from '@atlaskit/editor-common/types';
+type Props = {
+    layoutButtons: FloatingToolbarItem<Command>[];
+    dispatchCommand: (command: Command) => void;
+    hide: () => void;
+};
+export declare const LayoutGroup: ({ layoutButtons, dispatchCommand, hide, }: Props) => jsx.JSX.Element;
+export {};

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

@@ -1,4 +1,6 @@
 import type { MediaBaseAttributes, RichMediaLayout } from '@atlaskit/adf-schema';
+import type { LayoutIcon } from '@atlaskit/editor-common/card';
+import type { Node as ProseMirrorNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { MediaPluginState } from '../pm-plugins/types';
@@ -9,3 +11,4 @@ export declare const getSelectedMediaSingle: (state: EditorState) => import("pro
 export declare const getPixelWidthOfElement: import("memoize-one").MemoizedFn<(editorView: EditorView, pos: number, mediaWidth: number) => number>;
 export declare const calcNewLayout: (width: number, layout: RichMediaLayout, contentWidth: number, fullWidthMode?: boolean, isNested?: boolean) => RichMediaLayout;
 export declare const getMaxToolbarWidth: () => number;
+export declare const getSelectedLayoutIcon: (layoutIcons: LayoutIcon[], selectedNode: ProseMirrorNode) => LayoutIcon | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-media",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "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.17.0",
-    "@atlaskit/editor-common": "^76.22.0",
+    "@atlaskit/editor-common": "^76.23.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^0.3.0",
     "@atlaskit/editor-plugin-decorations": "^0.2.0",
@@ -64,7 +64,7 @@
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/textfield": "^6.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.28.0",
+    "@atlaskit/tokens": "^1.29.0",
     "@atlaskit/tooltip": "^18.0.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -134,6 +134,9 @@
     "platform.editor.media.inline-image.base-support": {
       "type": "boolean"
     },
+    "platform.editor.media.grouped-layout": {
+      "type": "boolean"
+    },
     "platform.media-experience.media-viewer-v2_hgsii": {
       "type": "boolean",
       "referenceOnly": "true"

package/report.api.md

@@ -156,7 +156,7 @@ export type MediaPlugin = NextEditorPlugin<
   {
     pluginConfiguration: MediaOptions | undefined;
     dependencies: [
-      FeatureFlagsPlugin,
+      OptionalPlugin<FeatureFlagsPlugin>,
       OptionalPlugin<AnalyticsPlugin>,
       GuidelinePlugin,
       GridPlugin,

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

@@ -139,7 +139,7 @@ interface MediaOptions {
 export type MediaPlugin = NextEditorPlugin<'media', {
     pluginConfiguration: MediaOptions | undefined;
     dependencies: [
-    FeatureFlagsPlugin,
+    OptionalPlugin<FeatureFlagsPlugin>,
     OptionalPlugin<AnalyticsPlugin>,
     GuidelinePlugin,
     GridPlugin,