@atlaskit/editor-plugin-layout 1.12.4 → 1.12.6

package/dist/es2019/toolbar.js

@@ -16,6 +16,8 @@ import LayoutTwoRightSidebarIcon from '@atlaskit/icon/glyph/editor/layout-two-ri
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { deleteActiveLayoutNode, getPresetLayout, setPresetLayout } from './actions';
+import { LayoutThreeWithLeftSidebarsIcon } from './ui/icons/LayoutThreeWithLeftSidebars';
+import { LayoutThreeWithRightSidebarsIcon } from './ui/icons/LayoutThreeWithRightSidebars';
 import { isPreRelease2 } from './utils/preRelease';
 const LAYOUT_TYPES = [{
   id: 'editor.layout.twoEquals',
@@ -56,7 +58,9 @@ const SIDEBAR_LAYOUT_TYPES = [{
   icon: LayoutThreeColumnsSidebarsIcon,
   iconFallback: LayoutThreeWithSidebarsIcon
 }];
-const LAYOUT_DISTRIBUTION_TYPES = [{
+
+// These are used for advanced layout options
+const LAYOUT_WITH_TWO_COL_DISTRIBUTION = [{
   id: 'editor.layout.twoEquals',
   type: 'two_equal',
   title: toolbarMessages.twoColumns,
@@ -74,7 +78,8 @@ const LAYOUT_DISTRIBUTION_TYPES = [{
   title: toolbarMessages.leftSidebar,
   icon: LayoutTwoColumnsSidebarLeftIcon,
   iconFallback: LayoutTwoLeftSidebarIcon
-}, {
+}];
+const LAYOUT_WITH_THREE_COL_DISTRIBUTION = [{
   id: 'editor.layout.threeEquals',
   type: 'three_equal',
   title: toolbarMessages.threeColumns,
@@ -86,13 +91,19 @@ const LAYOUT_DISTRIBUTION_TYPES = [{
   title: toolbarMessages.threeColumnsWithSidebars,
   icon: LayoutThreeColumnsSidebarsIcon,
   iconFallback: LayoutThreeWithSidebarsIcon
+}, {
+  id: 'editor.layout.threeRightSidebars',
+  type: 'three_right_sidebars',
+  title: toolbarMessages.threeColumnsWithRightSidebars,
+  icon: LayoutThreeWithRightSidebarsIcon,
+  iconFallback: LayoutThreeWithRightSidebarsIcon
+}, {
+  id: 'editor.layout.threeLeftSidebars',
+  type: 'three_left_sidebars',
+  title: toolbarMessages.threeColumnsWithLeftSidebars,
+  icon: LayoutThreeWithLeftSidebarsIcon,
+  iconFallback: LayoutThreeWithLeftSidebarsIcon
 }];
-const SIDEBAR_LAYOUT_TYPES_BY_COLUMNS = {
-  2: [LAYOUT_DISTRIBUTION_TYPES[0], LAYOUT_DISTRIBUTION_TYPES[1], LAYOUT_DISTRIBUTION_TYPES[2]],
-  3: [LAYOUT_DISTRIBUTION_TYPES[3], LAYOUT_DISTRIBUTION_TYPES[4]],
-  4: [],
-  5: []
-};
 const buildLayoutButton = (intl, item, currentLayout, editorAnalyticsAPI) => ({
   id: item.id,
   type: 'button',
@@ -106,6 +117,72 @@ const buildLayoutButton = (intl, item, currentLayout, editorAnalyticsAPI) => ({
 });
 export const layoutToolbarTitle = 'Layout floating controls';
 const iconPlaceholder = LayoutTwoColumnsIcon; // TODO: Replace with proper icon ED-25466
+
+const getAdvancedLayoutItems = ({
+  addSidebarLayouts,
+  intl,
+  editorAnalyticsAPI,
+  state,
+  node,
+  nodeType,
+  separator,
+  deleteButton,
+  currentLayout
+}) => {
+  const numberOfColumns = node.content.childCount || 2;
+  const distributionOptions = numberOfColumns === 2 ? LAYOUT_WITH_TWO_COL_DISTRIBUTION : numberOfColumns === 3 ? LAYOUT_WITH_THREE_COL_DISTRIBUTION : [];
+  const columnOptions = [{
+    title: intl.formatMessage(layoutMessages.columnOption, {
+      count: 2
+    }),
+    //'2-columns',
+    icon: iconPlaceholder,
+    onClick: setPresetLayout(editorAnalyticsAPI)('two_equal', intl.formatMessage),
+    selected: numberOfColumns === 2
+  }, {
+    title: intl.formatMessage(layoutMessages.columnOption, {
+      count: 3
+    }),
+    //'3-columns'
+    icon: iconPlaceholder,
+    onClick: setPresetLayout(editorAnalyticsAPI)('three_equal', intl.formatMessage),
+    selected: numberOfColumns === 3
+  }, {
+    title: intl.formatMessage(layoutMessages.columnOption, {
+      count: 4
+    }),
+    //'4-columns'
+    icon: iconPlaceholder,
+    onClick: setPresetLayout(editorAnalyticsAPI)('four_equal', intl.formatMessage),
+    selected: numberOfColumns === 4
+  }, {
+    title: intl.formatMessage(layoutMessages.columnOption, {
+      count: 5
+    }),
+    //'5-columns'
+    icon: iconPlaceholder,
+    onClick: setPresetLayout(editorAnalyticsAPI)('five_equal', intl.formatMessage),
+    selected: numberOfColumns === 5
+  }];
+  return [{
+    type: 'dropdown',
+    title: intl.formatMessage(layoutMessages.columnOption, {
+      count: numberOfColumns
+    }),
+    //`${numberOfColumns}-columns`,
+    options: columnOptions,
+    showSelected: true,
+    testId: 'column-options-button'
+  }, ...(distributionOptions.length > 0 ? [separator] : []), ...(addSidebarLayouts ? distributionOptions.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)) : []), separator, {
+    type: 'copy-button',
+    supportsViewMode: !fg('platform_editor_remove_copy_button_from_view_mode'),
+    items: [{
+      state,
+      formatMessage: intl.formatMessage,
+      nodeType
+    }]
+  }, separator, deleteButton];
+};
 export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api) => {
   var _api$decorations$acti, _api$decorations, _api$analytics;
   const {
@@ -115,7 +192,6 @@ export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts
   const node = state.doc.nodeAt(pos);
   if (node) {
     const currentLayout = getPresetLayout(node);
-    const numberOfColumns = node.content.childCount || 2;
     const separator = {
       type: 'separator'
     };
@@ -136,56 +212,23 @@ export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts
       onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
       tabIndex: null
     };
-    const layoutTypes = isPreRelease2() ? [] : allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
-    const columnOptions = [{
-      title: intl.formatMessage(layoutMessages.columnOption, {
-        count: 2
-      }),
-      //'2-columns',
-      icon: iconPlaceholder,
-      onClick: setPresetLayout(editorAnalyticsAPI)('two_equal', intl.formatMessage),
-      selected: numberOfColumns === 2
-    }, {
-      title: intl.formatMessage(layoutMessages.columnOption, {
-        count: 3
-      }),
-      //'3-columns'
-      icon: iconPlaceholder,
-      onClick: setPresetLayout(editorAnalyticsAPI)('three_equal', intl.formatMessage),
-      selected: numberOfColumns === 3
-    }, {
-      title: intl.formatMessage(layoutMessages.columnOption, {
-        count: 4
-      }),
-      //'4-columns'
-      icon: iconPlaceholder,
-      onClick: setPresetLayout(editorAnalyticsAPI)('four_equal', intl.formatMessage),
-      selected: numberOfColumns === 4
-    }, {
-      title: intl.formatMessage(layoutMessages.columnOption, {
-        count: 5
-      }),
-      //'5-columns'
-      icon: iconPlaceholder,
-      onClick: setPresetLayout(editorAnalyticsAPI)('five_equal', intl.formatMessage),
-      selected: numberOfColumns === 5
-    }];
-    const sidebarTypesByColumns = SIDEBAR_LAYOUT_TYPES_BY_COLUMNS[numberOfColumns] || [];
+    const layoutTypes = allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
     return {
       title: layoutToolbarTitle,
       getDomRef: view => findDomRefAtPos(pos, view.domAtPos.bind(view)),
       nodeType,
       groupLabel: intl.formatMessage(toolbarMessages.floatingToolbarRadioGroupAriaLabel),
-      items: [...(isPreRelease2() ? [{
-        type: 'dropdown',
-        title: intl.formatMessage(layoutMessages.columnOption, {
-          count: numberOfColumns
-        }),
-        //`${numberOfColumns}-columns`,
-        options: columnOptions,
-        showSelected: true,
-        testId: 'column-options-button'
-      }, ...(sidebarTypesByColumns.length > 0 ? [separator] : [])] : []), ...layoutTypes.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)), ...(addSidebarLayouts ? isPreRelease2() ? sidebarTypesByColumns.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)) : SIDEBAR_LAYOUT_TYPES.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)) : []), separator, {
+      items: isPreRelease2() ? getAdvancedLayoutItems({
+        addSidebarLayouts,
+        intl,
+        editorAnalyticsAPI,
+        state,
+        nodeType,
+        node,
+        separator,
+        deleteButton,
+        currentLayout
+      }) : [...layoutTypes.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)), ...(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)) : []), separator, {
         type: 'copy-button',
         supportsViewMode: !fg('platform_editor_remove_copy_button_from_view_mode'),
         items: [{

package/dist/es2019/ui/icons/LayoutThreeWithLeftSidebars.js

@@ -0,0 +1,46 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css, jsx } from '@emotion/react';
+import Icon from '@atlaskit/icon';
+import { fg } from '@atlaskit/platform-feature-flags';
+const LayoutThreeWithLeftSidebarsGlyph = props => {
+  if (fg('platform-visual-refresh-icons')) {
+    return jsx("svg", _extends({
+      width: "16",
+      height: "14",
+      viewBox: "0 0 16 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M7.5 1.375C7.5 0.615609 8.11561 0 8.875 0H9.625C10.3844 0 11 0.615608 11 1.375V12.625C11 13.3844 10.3844 14 9.625 14H8.875C8.11561 14 7.5 13.3844 7.5 12.625V1.375ZM9 1.5V12.5H9.5V1.5H9ZM0 1.37505C0 0.615655 0.615608 4.66853e-05 1.375 4.66853e-05H4.625C5.38439 4.66853e-05 6 0.615655 6 1.37505V12.625C6 13.3844 5.38439 14 4.625 14H1.375C0.615608 14 0 13.3844 0 12.625V1.37505ZM1.5 1.50005V12.5H4.5V1.50005H1.5ZM12.5 1.37505C12.5 0.615655 13.1156 4.66853e-05 13.875 4.66853e-05H14.625C15.3844 4.66853e-05 16 0.615655 16 1.37505V12.625C16 13.3844 15.3844 14 14.625 14H13.875C13.1156 14 12.5 13.3844 12.5 12.625V1.37505ZM14 1.50005V12.5H14.5V1.50005H14Z",
+      fill: "currentcolor"
+    }));
+  }
+  return jsx("svg", _extends({
+    width: "16",
+    height: "14",
+    viewBox: "0 0 16 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M1 0C1.26522 0 1.51957 0.105357 1.70711 0.292893C1.89464 0.48043 2 0.734784 2 1V13C2 13.2652 1.89464 13.5196 1.70711 13.7071C1.51957 13.8946 1.26522 14 1 14C0.734784 14 0.48043 13.8946 0.292893 13.7071C0.105357 13.5196 0 13.2652 0 13V1C0 0.734784 0.105357 0.48043 0.292893 0.292893C0.48043 0.105357 0.734784 0 1 0ZM9 0H15C15.2652 0 15.5196 0.105357 15.7071 0.292893C15.8946 0.48043 16 0.734784 16 1V13C16 13.2652 15.8946 13.5196 15.7071 13.7071C15.5196 13.8946 15.2652 14 15 14H9C8.73478 14 8.48043 13.8946 8.29289 13.7071C8.10536 13.5196 8 13.2652 8 13V1C8 0.734784 8.10536 0.48043 8.29289 0.292893C8.48043 0.105357 8.73478 0 9 0ZM5 0C5.26522 0 5.51957 0.105356 5.70711 0.292892C5.89464 0.480429 6 0.734784 6 1V13C6 13.2652 5.89464 13.5196 5.70711 13.7071C5.51957 13.8946 5.26522 14 5 14C4.73478 14 4.48043 13.8946 4.29289 13.7071C4.10536 13.5196 4 13.2652 4 13V1C4 0.734784 4.10536 0.480429 4.29289 0.292892C4.48043 0.105356 4.73478 0 5 0Z",
+    fill: "currentcolor"
+  }));
+};
+const floatingToolbarPadding = css({
+  paddingRight: "var(--ds-space-050, 4px)",
+  paddingLeft: "var(--ds-space-050, 4px)"
+});
+export const LayoutThreeWithLeftSidebarsIcon = props => jsx("span", {
+  css: floatingToolbarPadding
+}, jsx(Icon, _extends({
+  glyph: LayoutThreeWithLeftSidebarsGlyph
+}, props)));

package/dist/es2019/ui/icons/LayoutThreeWithRightSidebars.js

@@ -0,0 +1,46 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css, jsx } from '@emotion/react';
+import Icon from '@atlaskit/icon';
+import { fg } from '@atlaskit/platform-feature-flags';
+const LayoutThreeWithRightSidebarsGlyph = props => {
+  if (fg('platform-visual-refresh-icons')) {
+    return jsx("svg", _extends({
+      width: "16",
+      height: "14",
+      viewBox: "0 0 16 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M8.5 1.375C8.5 0.615609 7.88439 0 7.125 0H6.375C5.61561 0 5 0.615608 5 1.375V12.625C5 13.3844 5.61561 14 6.375 14H7.125C7.88439 14 8.5 13.3844 8.5 12.625V1.375ZM7 1.5V12.5H6.5V1.5H7ZM16 1.37505C16 0.615655 15.3844 4.66853e-05 14.625 4.66853e-05H11.375C10.6156 4.66853e-05 10 0.615655 10 1.37505V12.625C10 13.3844 10.6156 14 11.375 14H14.625C15.3844 14 16 13.3844 16 12.625V1.37505ZM14.5 1.50005V12.5H11.5V1.50005H14.5ZM3.5 1.37505C3.5 0.615655 2.88439 4.66853e-05 2.125 4.66853e-05H1.375C0.615608 4.66853e-05 0 0.615655 0 1.37505V12.625C0 13.3844 0.615608 14 1.375 14H2.125C2.88439 14 3.5 13.3844 3.5 12.625V1.37505ZM2 1.50005V12.5H1.5V1.50005H2Z",
+      fill: "currentcolor"
+    }));
+  }
+  return jsx("svg", _extends({
+    width: "16",
+    height: "14",
+    viewBox: "0 0 16 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11 0C11.2652 0 11.5196 0.105357 11.7071 0.292893C11.8946 0.48043 12 0.734784 12 1V13C12 13.2652 11.8946 13.5196 11.7071 13.7071C11.5196 13.8946 11.2652 14 11 14C10.7348 14 10.4804 13.8946 10.2929 13.7071C10.1054 13.5196 10 13.2652 10 13V1C10 0.734784 10.1054 0.48043 10.2929 0.292893C10.4804 0.105357 10.7348 0 11 0ZM1 0H7C7.26522 0 7.51957 0.105357 7.70711 0.292893C7.89464 0.48043 8 0.734784 8 1V13C8 13.2652 7.89464 13.5196 7.70711 13.7071C7.51957 13.8946 7.26522 14 7 14H1C0.734784 14 0.48043 13.8946 0.292893 13.7071C0.105357 13.5196 0 13.2652 0 13V1C0 0.734784 0.105357 0.48043 0.292893 0.292893C0.48043 0.105357 0.734784 0 1 0ZM15 0C15.2652 0 15.5196 0.105357 15.7071 0.292893C15.8946 0.48043 16 0.734784 16 1V13C16 13.2652 15.8946 13.5196 15.7071 13.7071C15.5196 13.8946 15.2652 14 15 14C14.7348 14 14.4804 13.8946 14.2929 13.7071C14.1054 13.5196 14 13.2652 14 13V1C14 0.734784 14.1054 0.48043 14.2929 0.292893C14.4804 0.105357 14.7348 0 15 0Z",
+    fill: "currentcolor"
+  }));
+};
+const floatingToolbarPadding = css({
+  paddingRight: "var(--ds-space-050, 4px)",
+  paddingLeft: "var(--ds-space-050, 4px)"
+});
+export const LayoutThreeWithRightSidebarsIcon = props => jsx("span", {
+  css: floatingToolbarPadding
+}, jsx(Icon, _extends({
+  glyph: LayoutThreeWithRightSidebarsGlyph
+}, props)));

package/dist/esm/actions.js

@@ -8,14 +8,13 @@ import { flatmap, getStepRange, isEmptyDocument, mapChildren } from '@atlaskit/e
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { EVEN_DISTRIBUTED_COL_WIDTHS } from './consts';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { isPreRelease2 } from './utils/preRelease';
 export var ONE_COL_LAYOUTS = ['single'];
 export var TWO_COL_LAYOUTS = ['two_equal', 'two_left_sidebar', 'two_right_sidebar'];
 export var THREE_COL_LAYOUTS = ['three_equal', 'three_with_sidebars'];
-export var FOUR_COL_LAYOUTS = ['four_equal'];
-export var FIVE_COL_LAYOUTS = ['five_equal'];
 var getWidthsForPreset = function getWidthsForPreset(presetLayout) {
   if (isPreRelease2()) {
     switch (presetLayout) {
@@ -31,6 +30,10 @@ var getWidthsForPreset = function getWidthsForPreset(presetLayout) {
         return [66.66, 33.33];
       case 'three_with_sidebars':
         return [25, 50, 25];
+      case 'three_left_sidebars':
+        return [25, 25, 50];
+      case 'three_right_sidebars':
+        return [50, 25, 25];
       case 'four_equal':
         return [25, 25, 25, 25];
       case 'five_equal':
@@ -54,11 +57,17 @@ var getWidthsForPreset = function getWidthsForPreset(presetLayout) {
   return [];
 };
 var isValidLayoutWidthDistributions = function isValidLayoutWidthDistributions(layoutSection) {
-  var totalWidth = mapChildren(layoutSection, function (column) {
+  var totalWidth = 0;
+  mapChildren(layoutSection, function (column) {
     return column.attrs.width;
-  }).reduce(function (total, width) {
-    return total + width;
-  }, 0);
+  }).forEach(function (width) {
+    if (typeof width === 'number' && isFinite(width) && width > 0 && width <= 100) {
+      totalWidth += width;
+    }
+
+    // not a valid width, e.g. 0, 100, undefined
+    return false;
+  });
   return Math.round(totalWidth) === 100;
 };
 
@@ -78,6 +87,10 @@ export var getPresetLayout = function getPresetLayout(section) {
         return 'three_equal';
       case '25,50,25':
         return 'three_with_sidebars';
+      case '50,25,25':
+        return 'three_right_sidebars';
+      case '25,25,50':
+        return 'three_left_sidebars';
       case '50,50':
         return 'two_equal';
       case '33.33,66.66':
@@ -374,12 +387,30 @@ function layoutNeedChanges(node) {
   }
   return !getPresetLayout(node);
 }
+var getDefaultPresetLayout = function getDefaultPresetLayout(layoutNode) {
+  var layoutColumnCount = layoutNode.childCount;
+  if (layoutColumnCount <= 1) {
+    return 'single';
+  }
+  switch (layoutColumnCount) {
+    case 2:
+      return 'two_equal';
+    case 3:
+      return 'three_equal';
+    case 4:
+      return 'four_equal';
+    case 5:
+      return 'five_equal';
+    default:
+      return 'five_equal';
+  }
+};
 function getLayoutChange(node, pos, schema) {
   if (node.type === schema.nodes.layoutSection) {
     if (!layoutNeedChanges(node)) {
       return;
     }
-    var presetLayout = node.childCount === 2 ? 'two_equal' : node.childCount === 3 ? 'three_equal' : 'single';
+    var presetLayout = editorExperiment('advanced_layouts', true) ? getDefaultPresetLayout(node) : node.childCount === 2 ? 'two_equal' : node.childCount === 3 ? 'three_equal' : 'single';
     var fixedColumns = columnWidth(node, schema, getWidthsForPreset(presetLayout));
     return {
       from: pos + 1,
@@ -428,8 +459,13 @@ export var fixColumnStructure = function fixColumnStructure(state) {
     selectedLayout = _ref2.selectedLayout;
   if (pos !== null && selectedLayout) {
     var node = state.doc.nodeAt(pos);
-    if (node && node.childCount !== getWidthsForPreset(selectedLayout).length) {
-      return forceSectionToPresetLayout(state, node, pos, selectedLayout);
+    if (node) {
+      if (node.childCount !== getWidthsForPreset(selectedLayout).length) {
+        return forceSectionToPresetLayout(state, node, pos, selectedLayout);
+      }
+      if (!isValidLayoutWidthDistributions(node) && editorExperiment('advanced_layouts', true)) {
+        return forceSectionToPresetLayout(state, node, pos, selectedLayout);
+      }
     }
   }
   return;

package/dist/esm/toolbar.js

@@ -17,6 +17,8 @@ import LayoutTwoRightSidebarIcon from '@atlaskit/icon/glyph/editor/layout-two-ri
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { deleteActiveLayoutNode, getPresetLayout, setPresetLayout } from './actions';
+import { LayoutThreeWithLeftSidebarsIcon } from './ui/icons/LayoutThreeWithLeftSidebars';
+import { LayoutThreeWithRightSidebarsIcon } from './ui/icons/LayoutThreeWithRightSidebars';
 import { isPreRelease2 } from './utils/preRelease';
 var LAYOUT_TYPES = [{
   id: 'editor.layout.twoEquals',
@@ -57,7 +59,9 @@ var SIDEBAR_LAYOUT_TYPES = [{
   icon: LayoutThreeColumnsSidebarsIcon,
   iconFallback: LayoutThreeWithSidebarsIcon
 }];
-var LAYOUT_DISTRIBUTION_TYPES = [{
+
+// These are used for advanced layout options
+var LAYOUT_WITH_TWO_COL_DISTRIBUTION = [{
   id: 'editor.layout.twoEquals',
   type: 'two_equal',
   title: toolbarMessages.twoColumns,
@@ -75,7 +79,8 @@ var LAYOUT_DISTRIBUTION_TYPES = [{
   title: toolbarMessages.leftSidebar,
   icon: LayoutTwoColumnsSidebarLeftIcon,
   iconFallback: LayoutTwoLeftSidebarIcon
-}, {
+}];
+var LAYOUT_WITH_THREE_COL_DISTRIBUTION = [{
   id: 'editor.layout.threeEquals',
   type: 'three_equal',
   title: toolbarMessages.threeColumns,
@@ -87,13 +92,19 @@ var LAYOUT_DISTRIBUTION_TYPES = [{
   title: toolbarMessages.threeColumnsWithSidebars,
   icon: LayoutThreeColumnsSidebarsIcon,
   iconFallback: LayoutThreeWithSidebarsIcon
+}, {
+  id: 'editor.layout.threeRightSidebars',
+  type: 'three_right_sidebars',
+  title: toolbarMessages.threeColumnsWithRightSidebars,
+  icon: LayoutThreeWithRightSidebarsIcon,
+  iconFallback: LayoutThreeWithRightSidebarsIcon
+}, {
+  id: 'editor.layout.threeLeftSidebars',
+  type: 'three_left_sidebars',
+  title: toolbarMessages.threeColumnsWithLeftSidebars,
+  icon: LayoutThreeWithLeftSidebarsIcon,
+  iconFallback: LayoutThreeWithLeftSidebarsIcon
 }];
-var SIDEBAR_LAYOUT_TYPES_BY_COLUMNS = {
-  2: [LAYOUT_DISTRIBUTION_TYPES[0], LAYOUT_DISTRIBUTION_TYPES[1], LAYOUT_DISTRIBUTION_TYPES[2]],
-  3: [LAYOUT_DISTRIBUTION_TYPES[3], LAYOUT_DISTRIBUTION_TYPES[4]],
-  4: [],
-  5: []
-};
 var buildLayoutButton = function buildLayoutButton(intl, item, currentLayout, editorAnalyticsAPI) {
   return {
     id: item.id,
@@ -109,15 +120,81 @@ var buildLayoutButton = function buildLayoutButton(intl, item, currentLayout, ed
 };
 export var layoutToolbarTitle = 'Layout floating controls';
 var iconPlaceholder = LayoutTwoColumnsIcon; // TODO: Replace with proper icon ED-25466
+
+var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
+  var addSidebarLayouts = _ref.addSidebarLayouts,
+    intl = _ref.intl,
+    editorAnalyticsAPI = _ref.editorAnalyticsAPI,
+    state = _ref.state,
+    node = _ref.node,
+    nodeType = _ref.nodeType,
+    separator = _ref.separator,
+    deleteButton = _ref.deleteButton,
+    currentLayout = _ref.currentLayout;
+  var numberOfColumns = node.content.childCount || 2;
+  var distributionOptions = numberOfColumns === 2 ? LAYOUT_WITH_TWO_COL_DISTRIBUTION : numberOfColumns === 3 ? LAYOUT_WITH_THREE_COL_DISTRIBUTION : [];
+  var columnOptions = [{
+    title: intl.formatMessage(layoutMessages.columnOption, {
+      count: 2
+    }),
+    //'2-columns',
+    icon: iconPlaceholder,
+    onClick: setPresetLayout(editorAnalyticsAPI)('two_equal', intl.formatMessage),
+    selected: numberOfColumns === 2
+  }, {
+    title: intl.formatMessage(layoutMessages.columnOption, {
+      count: 3
+    }),
+    //'3-columns'
+    icon: iconPlaceholder,
+    onClick: setPresetLayout(editorAnalyticsAPI)('three_equal', intl.formatMessage),
+    selected: numberOfColumns === 3
+  }, {
+    title: intl.formatMessage(layoutMessages.columnOption, {
+      count: 4
+    }),
+    //'4-columns'
+    icon: iconPlaceholder,
+    onClick: setPresetLayout(editorAnalyticsAPI)('four_equal', intl.formatMessage),
+    selected: numberOfColumns === 4
+  }, {
+    title: intl.formatMessage(layoutMessages.columnOption, {
+      count: 5
+    }),
+    //'5-columns'
+    icon: iconPlaceholder,
+    onClick: setPresetLayout(editorAnalyticsAPI)('five_equal', intl.formatMessage),
+    selected: numberOfColumns === 5
+  }];
+  return [{
+    type: 'dropdown',
+    title: intl.formatMessage(layoutMessages.columnOption, {
+      count: numberOfColumns
+    }),
+    //`${numberOfColumns}-columns`,
+    options: columnOptions,
+    showSelected: true,
+    testId: 'column-options-button'
+  }].concat(_toConsumableArray(distributionOptions.length > 0 ? [separator] : []), _toConsumableArray(addSidebarLayouts ? distributionOptions.map(function (i) {
+    return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
+  }) : []), [separator, {
+    type: 'copy-button',
+    supportsViewMode: !fg('platform_editor_remove_copy_button_from_view_mode'),
+    items: [{
+      state: state,
+      formatMessage: intl.formatMessage,
+      nodeType: nodeType
+    }]
+  }, separator, deleteButton]);
+};
 export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api) {
   var _api$decorations$acti, _api$decorations, _api$analytics;
-  var _ref = (_api$decorations$acti = api === null || api === void 0 || (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions) !== null && _api$decorations$acti !== void 0 ? _api$decorations$acti : {},
-    hoverDecoration = _ref.hoverDecoration;
+  var _ref2 = (_api$decorations$acti = api === null || api === void 0 || (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions) !== null && _api$decorations$acti !== void 0 ? _api$decorations$acti : {},
+    hoverDecoration = _ref2.hoverDecoration;
   var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
   var node = state.doc.nodeAt(pos);
   if (node) {
     var currentLayout = getPresetLayout(node);
-    var numberOfColumns = node.content.childCount || 2;
     var separator = {
       type: 'separator'
     };
@@ -138,41 +215,7 @@ export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout
       onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
       tabIndex: null
     };
-    var layoutTypes = isPreRelease2() ? [] : allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
-    var columnOptions = [{
-      title: intl.formatMessage(layoutMessages.columnOption, {
-        count: 2
-      }),
-      //'2-columns',
-      icon: iconPlaceholder,
-      onClick: setPresetLayout(editorAnalyticsAPI)('two_equal', intl.formatMessage),
-      selected: numberOfColumns === 2
-    }, {
-      title: intl.formatMessage(layoutMessages.columnOption, {
-        count: 3
-      }),
-      //'3-columns'
-      icon: iconPlaceholder,
-      onClick: setPresetLayout(editorAnalyticsAPI)('three_equal', intl.formatMessage),
-      selected: numberOfColumns === 3
-    }, {
-      title: intl.formatMessage(layoutMessages.columnOption, {
-        count: 4
-      }),
-      //'4-columns'
-      icon: iconPlaceholder,
-      onClick: setPresetLayout(editorAnalyticsAPI)('four_equal', intl.formatMessage),
-      selected: numberOfColumns === 4
-    }, {
-      title: intl.formatMessage(layoutMessages.columnOption, {
-        count: 5
-      }),
-      //'5-columns'
-      icon: iconPlaceholder,
-      onClick: setPresetLayout(editorAnalyticsAPI)('five_equal', intl.formatMessage),
-      selected: numberOfColumns === 5
-    }];
-    var sidebarTypesByColumns = SIDEBAR_LAYOUT_TYPES_BY_COLUMNS[numberOfColumns] || [];
+    var layoutTypes = allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
     return {
       title: layoutToolbarTitle,
       getDomRef: function getDomRef(view) {
@@ -180,20 +223,19 @@ export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout
       },
       nodeType: nodeType,
       groupLabel: intl.formatMessage(toolbarMessages.floatingToolbarRadioGroupAriaLabel),
-      items: [].concat(_toConsumableArray(isPreRelease2() ? [{
-        type: 'dropdown',
-        title: intl.formatMessage(layoutMessages.columnOption, {
-          count: numberOfColumns
-        }),
-        //`${numberOfColumns}-columns`,
-        options: columnOptions,
-        showSelected: true,
-        testId: 'column-options-button'
-      }].concat(_toConsumableArray(sidebarTypesByColumns.length > 0 ? [separator] : [])) : []), _toConsumableArray(layoutTypes.map(function (i) {
-        return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
-      })), _toConsumableArray(addSidebarLayouts ? isPreRelease2() ? sidebarTypesByColumns.map(function (i) {
+      items: isPreRelease2() ? getAdvancedLayoutItems({
+        addSidebarLayouts: addSidebarLayouts,
+        intl: intl,
+        editorAnalyticsAPI: editorAnalyticsAPI,
+        state: state,
+        nodeType: nodeType,
+        node: node,
+        separator: separator,
+        deleteButton: deleteButton,
+        currentLayout: currentLayout
+      }) : [].concat(_toConsumableArray(layoutTypes.map(function (i) {
         return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
-      }) : SIDEBAR_LAYOUT_TYPES.map(function (i) {
+      })), _toConsumableArray(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(function (i) {
         return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
       }) : []), [separator, {
         type: 'copy-button',

package/dist/esm/ui/icons/LayoutThreeWithLeftSidebars.js

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css, jsx } from '@emotion/react';
+import Icon from '@atlaskit/icon';
+import { fg } from '@atlaskit/platform-feature-flags';
+var LayoutThreeWithLeftSidebarsGlyph = function LayoutThreeWithLeftSidebarsGlyph(props) {
+  if (fg('platform-visual-refresh-icons')) {
+    return jsx("svg", _extends({
+      width: "16",
+      height: "14",
+      viewBox: "0 0 16 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M7.5 1.375C7.5 0.615609 8.11561 0 8.875 0H9.625C10.3844 0 11 0.615608 11 1.375V12.625C11 13.3844 10.3844 14 9.625 14H8.875C8.11561 14 7.5 13.3844 7.5 12.625V1.375ZM9 1.5V12.5H9.5V1.5H9ZM0 1.37505C0 0.615655 0.615608 4.66853e-05 1.375 4.66853e-05H4.625C5.38439 4.66853e-05 6 0.615655 6 1.37505V12.625C6 13.3844 5.38439 14 4.625 14H1.375C0.615608 14 0 13.3844 0 12.625V1.37505ZM1.5 1.50005V12.5H4.5V1.50005H1.5ZM12.5 1.37505C12.5 0.615655 13.1156 4.66853e-05 13.875 4.66853e-05H14.625C15.3844 4.66853e-05 16 0.615655 16 1.37505V12.625C16 13.3844 15.3844 14 14.625 14H13.875C13.1156 14 12.5 13.3844 12.5 12.625V1.37505ZM14 1.50005V12.5H14.5V1.50005H14Z",
+      fill: "currentcolor"
+    }));
+  }
+  return jsx("svg", _extends({
+    width: "16",
+    height: "14",
+    viewBox: "0 0 16 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M1 0C1.26522 0 1.51957 0.105357 1.70711 0.292893C1.89464 0.48043 2 0.734784 2 1V13C2 13.2652 1.89464 13.5196 1.70711 13.7071C1.51957 13.8946 1.26522 14 1 14C0.734784 14 0.48043 13.8946 0.292893 13.7071C0.105357 13.5196 0 13.2652 0 13V1C0 0.734784 0.105357 0.48043 0.292893 0.292893C0.48043 0.105357 0.734784 0 1 0ZM9 0H15C15.2652 0 15.5196 0.105357 15.7071 0.292893C15.8946 0.48043 16 0.734784 16 1V13C16 13.2652 15.8946 13.5196 15.7071 13.7071C15.5196 13.8946 15.2652 14 15 14H9C8.73478 14 8.48043 13.8946 8.29289 13.7071C8.10536 13.5196 8 13.2652 8 13V1C8 0.734784 8.10536 0.48043 8.29289 0.292893C8.48043 0.105357 8.73478 0 9 0ZM5 0C5.26522 0 5.51957 0.105356 5.70711 0.292892C5.89464 0.480429 6 0.734784 6 1V13C6 13.2652 5.89464 13.5196 5.70711 13.7071C5.51957 13.8946 5.26522 14 5 14C4.73478 14 4.48043 13.8946 4.29289 13.7071C4.10536 13.5196 4 13.2652 4 13V1C4 0.734784 4.10536 0.480429 4.29289 0.292892C4.48043 0.105356 4.73478 0 5 0Z",
+    fill: "currentcolor"
+  }));
+};
+var floatingToolbarPadding = css({
+  paddingRight: "var(--ds-space-050, 4px)",
+  paddingLeft: "var(--ds-space-050, 4px)"
+});
+export var LayoutThreeWithLeftSidebarsIcon = function LayoutThreeWithLeftSidebarsIcon(props) {
+  return jsx("span", {
+    css: floatingToolbarPadding
+  }, jsx(Icon, _extends({
+    glyph: LayoutThreeWithLeftSidebarsGlyph
+  }, props)));
+};