@atlaskit/editor-plugin-layout 1.9.5 → 1.9.7

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/editor-plugin-layout
 
+## 1.9.7
+
+### Patch Changes
+
+- [#156974](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/156974)
+  [`e23605a60e753`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e23605a60e753) -
+  Add four and five column support for layout sections
+- Updated dependencies
+
+## 1.9.6
+
+### Patch Changes
+
+- [#155293](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/155293)
+  [`28161e3c04419`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/28161e3c04419) -
+  [ux] Implement toolbar options on layout for setting number of columns
+- [#156078](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/156078)
+  [`2b70196727715`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2b70196727715) -
+  [ux] Update text for inserting multi column layout
+- [#156137](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/156137)
+  [`485e094b29aa9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/485e094b29aa9) -
+  Use stage0 layout node spec behind adv layout experiment
+- Updated dependencies
+
 ## 1.9.5
 
 ### Patch Changes

package/dist/cjs/actions.js

@@ -24,6 +24,26 @@ var ONE_COL_LAYOUTS = exports.ONE_COL_LAYOUTS = ['single'];
 var TWO_COL_LAYOUTS = exports.TWO_COL_LAYOUTS = ['two_equal', 'two_left_sidebar', 'two_right_sidebar'];
 var THREE_COL_LAYOUTS = exports.THREE_COL_LAYOUTS = ['three_equal', 'three_with_sidebars'];
 var getWidthsForPreset = function getWidthsForPreset(presetLayout) {
+  if ((0, _preRelease.isPreRelease2)()) {
+    switch (presetLayout) {
+      case 'single':
+        return [100];
+      case 'two_equal':
+        return [50, 50];
+      case 'three_equal':
+        return [33.33, 33.33, 33.33];
+      case 'two_left_sidebar':
+        return [33.33, 66.66];
+      case 'two_right_sidebar':
+        return [66.66, 33.33];
+      case 'three_with_sidebars':
+        return [25, 50, 25];
+      case 'four_equal':
+        return [25, 25, 25, 25];
+      case 'five_equal':
+        return [20, 20, 20, 20, 20];
+    }
+  }
   switch (presetLayout) {
     case 'single':
       return [100];
@@ -38,6 +58,7 @@ var getWidthsForPreset = function getWidthsForPreset(presetLayout) {
     case 'three_with_sidebars':
       return [25, 50, 25];
   }
+  return [];
 };
 
 /**
@@ -48,6 +69,27 @@ var getPresetLayout = exports.getPresetLayout = function getPresetLayout(section
   var widths = (0, _utils.mapChildren)(section, function (column) {
     return column.attrs.width;
   }).join(',');
+  if ((0, _preRelease.isPreRelease2)()) {
+    switch (widths) {
+      case '100':
+        return 'single';
+      case '33.33,33.33,33.33':
+        return 'three_equal';
+      case '25,50,25':
+        return 'three_with_sidebars';
+      case '50,50':
+        return 'two_equal';
+      case '33.33,66.66':
+        return 'two_left_sidebar';
+      case '66.66,33.33':
+        return 'two_right_sidebar';
+      case '25,25,25,25':
+        return 'four_equal';
+      case '20,20,20,20,20':
+        return 'five_equal';
+    }
+    return;
+  }
   switch (widths) {
     case '100':
       return 'single';
@@ -377,6 +419,26 @@ var deleteActiveLayoutNode = exports.deleteActiveLayoutNode = function deleteAct
   };
 };
 var formatLayoutName = function formatLayoutName(layout) {
+  if ((0, _preRelease.isPreRelease2)()) {
+    switch (layout) {
+      case 'single':
+        return _analytics.LAYOUT_TYPE.SINGLE_COL;
+      case 'two_equal':
+        return _analytics.LAYOUT_TYPE.TWO_COLS_EQUAL;
+      case 'three_equal':
+        return _analytics.LAYOUT_TYPE.THREE_COLS_EQUAL;
+      case 'two_left_sidebar':
+        return _analytics.LAYOUT_TYPE.LEFT_SIDEBAR;
+      case 'two_right_sidebar':
+        return _analytics.LAYOUT_TYPE.RIGHT_SIDEBAR;
+      case 'three_with_sidebars':
+        return _analytics.LAYOUT_TYPE.THREE_WITH_SIDEBARS;
+      case 'four_equal':
+        return _analytics.LAYOUT_TYPE.FOUR_COLS_EQUAL;
+      case 'five_equal':
+        return _analytics.LAYOUT_TYPE.FIVE_COLS_EQUAL;
+    }
+  }
   switch (layout) {
     case 'single':
       return _analytics.LAYOUT_TYPE.SINGLE_COL;

package/dist/cjs/plugin.js

@@ -13,6 +13,7 @@ Object.defineProperty(exports, "pluginKey", {
 });
 var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
+var _schema = require("@atlaskit/adf-schema/schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
@@ -32,7 +33,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
     nodes: function nodes() {
       return [{
         name: 'layoutSection',
-        node: _adfSchema.layoutSection
+        node: (0, _preRelease.isPreRelease2)() ? _schema.layoutSectionWithSingleColumn : _adfSchema.layoutSection
       }, {
         name: 'layoutColumn',
         node: _adfSchema.layoutColumn
@@ -65,7 +66,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
         var formatMessage = _ref3.formatMessage;
         return (0, _preRelease.isPreRelease2)() ? [{
           id: 'twocolumnslayout',
-          title: formatMessage(_messages.toolbarInsertBlockMessages.twoColumns),
+          title: formatMessage(_messages.layoutMessages.twoColumns),
           description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescription),
           keywords: ['layout', 'column', 'section', 'two column'],
           priority: 1100,
@@ -78,7 +79,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
           }
         }, {
           id: 'threecolumnslayout',
-          title: formatMessage(_messages.toolbarInsertBlockMessages.threeColumns),
+          title: formatMessage(_messages.layoutMessages.threeColumns),
           description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescription),
           keywords: ['layout', 'column', 'section', 'three column'],
           priority: 1100,
@@ -91,7 +92,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
           }
         }, {
           id: 'fourcolumnslayout',
-          title: formatMessage(_messages.toolbarInsertBlockMessages.fourColumns),
+          title: formatMessage(_messages.layoutMessages.fourColumns),
           description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescription),
           keywords: ['layout', 'column', 'section', 'four column'],
           priority: 1100,
@@ -104,7 +105,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
           }
         }, {
           id: 'fivecolumnslayout',
-          title: formatMessage(_messages.toolbarInsertBlockMessages.fiveColumns),
+          title: formatMessage(_messages.layoutMessages.fiveColumns),
           description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescription),
           keywords: ['layout', 'column', 'section', 'five column'],
           priority: 1100,

package/dist/cjs/toolbar.js

@@ -24,6 +24,7 @@ var _layoutTwoLeftSidebar = _interopRequireDefault(require("@atlaskit/icon/glyph
 var _layoutTwoRightSidebar = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/layout-two-right-sidebar"));
 var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
 var _actions = require("./actions");
+var _preRelease = require("./utils/preRelease");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var LAYOUT_TYPES = [{
@@ -79,6 +80,7 @@ var buildLayoutButton = function buildLayoutButton(intl, item, currentLayout, ed
   };
 };
 var layoutToolbarTitle = exports.layoutToolbarTitle = 'Layout floating controls';
+var iconPlaceholder = _layoutTwoColumns.default; // TODO: Replace with proper icon ED-25466
 var buildToolbar = exports.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 : {},
@@ -87,6 +89,7 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos
   var node = state.doc.nodeAt(pos);
   if (node) {
     var currentLayout = (0, _actions.getPresetLayout)(node);
+    var numberOfColumns = node.content.childCount || 2;
     var separator = {
       type: 'separator'
     };
@@ -107,7 +110,46 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos
       onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
       tabIndex: null
     };
-    var layoutTypes = allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
+    var layoutTypes = (0, _preRelease.isPreRelease2)() ? [] : allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
+    var columnOptions = [{
+      title: intl.formatMessage(_messages.layoutMessages.columnOption, {
+        count: 2
+      }),
+      //'2-columns',
+      icon: iconPlaceholder,
+      onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('two_equal', intl.formatMessage),
+      selected: numberOfColumns === 2
+    }, {
+      title: intl.formatMessage(_messages.layoutMessages.columnOption, {
+        count: 3
+      }),
+      //'3-columns'
+      icon: iconPlaceholder,
+      onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('three_equal', intl.formatMessage),
+      selected: numberOfColumns === 3
+    }, {
+      title: intl.formatMessage(_messages.layoutMessages.columnOption, {
+        count: 4
+      }),
+      //'4-columns'
+      icon: iconPlaceholder,
+      onClick: function onClick() {
+        // TODO: Implement layout update in ED-25053
+        return true;
+      },
+      selected: numberOfColumns === 4
+    }, {
+      title: intl.formatMessage(_messages.layoutMessages.columnOption, {
+        count: 5
+      }),
+      //'5-columns'
+      icon: iconPlaceholder,
+      onClick: function onClick() {
+        // TODO: Implement layout update in ED-25053
+        return true;
+      },
+      selected: numberOfColumns === 5
+    }];
     return {
       title: layoutToolbarTitle,
       getDomRef: function getDomRef(view) {
@@ -115,7 +157,16 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos
       },
       nodeType: nodeType,
       groupLabel: intl.formatMessage(_messages.layoutMessages.floatingToolbarRadioGroupAriaLabel),
-      items: [].concat((0, _toConsumableArray2.default)(layoutTypes.map(function (i) {
+      items: [].concat((0, _toConsumableArray2.default)((0, _preRelease.isPreRelease2)() ? [{
+        type: 'dropdown',
+        title: intl.formatMessage(_messages.layoutMessages.columnOption, {
+          count: numberOfColumns
+        }),
+        //`${numberOfColumns}-columns`,
+        options: columnOptions,
+        showSelected: true,
+        testId: 'column-options-button'
+      }] : []), (0, _toConsumableArray2.default)(layoutTypes.map(function (i) {
         return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
       })), (0, _toConsumableArray2.default)(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(function (i) {
         return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);

package/dist/es2019/actions.js

@@ -12,6 +12,26 @@ export const ONE_COL_LAYOUTS = ['single'];
 export const TWO_COL_LAYOUTS = ['two_equal', 'two_left_sidebar', 'two_right_sidebar'];
 export const THREE_COL_LAYOUTS = ['three_equal', 'three_with_sidebars'];
 const getWidthsForPreset = presetLayout => {
+  if (isPreRelease2()) {
+    switch (presetLayout) {
+      case 'single':
+        return [100];
+      case 'two_equal':
+        return [50, 50];
+      case 'three_equal':
+        return [33.33, 33.33, 33.33];
+      case 'two_left_sidebar':
+        return [33.33, 66.66];
+      case 'two_right_sidebar':
+        return [66.66, 33.33];
+      case 'three_with_sidebars':
+        return [25, 50, 25];
+      case 'four_equal':
+        return [25, 25, 25, 25];
+      case 'five_equal':
+        return [20, 20, 20, 20, 20];
+    }
+  }
   switch (presetLayout) {
     case 'single':
       return [100];
@@ -26,6 +46,7 @@ const getWidthsForPreset = presetLayout => {
     case 'three_with_sidebars':
       return [25, 50, 25];
   }
+  return [];
 };
 
 /**
@@ -34,6 +55,27 @@ const getWidthsForPreset = presetLayout => {
  */
 export const getPresetLayout = section => {
   const widths = mapChildren(section, column => column.attrs.width).join(',');
+  if (isPreRelease2()) {
+    switch (widths) {
+      case '100':
+        return 'single';
+      case '33.33,33.33,33.33':
+        return 'three_equal';
+      case '25,50,25':
+        return 'three_with_sidebars';
+      case '50,50':
+        return 'two_equal';
+      case '33.33,66.66':
+        return 'two_left_sidebar';
+      case '66.66,33.33':
+        return 'two_right_sidebar';
+      case '25,25,25,25':
+        return 'four_equal';
+      case '20,20,20,20,20':
+        return 'five_equal';
+    }
+    return;
+  }
   switch (widths) {
     case '100':
       return 'single';
@@ -360,6 +402,26 @@ export const deleteActiveLayoutNode = editorAnalyticsAPI => (state, dispatch) =>
   return false;
 };
 const formatLayoutName = layout => {
+  if (isPreRelease2()) {
+    switch (layout) {
+      case 'single':
+        return LAYOUT_TYPE.SINGLE_COL;
+      case 'two_equal':
+        return LAYOUT_TYPE.TWO_COLS_EQUAL;
+      case 'three_equal':
+        return LAYOUT_TYPE.THREE_COLS_EQUAL;
+      case 'two_left_sidebar':
+        return LAYOUT_TYPE.LEFT_SIDEBAR;
+      case 'two_right_sidebar':
+        return LAYOUT_TYPE.RIGHT_SIDEBAR;
+      case 'three_with_sidebars':
+        return LAYOUT_TYPE.THREE_WITH_SIDEBARS;
+      case 'four_equal':
+        return LAYOUT_TYPE.FOUR_COLS_EQUAL;
+      case 'five_equal':
+        return LAYOUT_TYPE.FIVE_COLS_EQUAL;
+    }
+  }
   switch (layout) {
     case 'single':
       return LAYOUT_TYPE.SINGLE_COL;

package/dist/es2019/plugin.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { layoutColumn, layoutSection } from '@atlaskit/adf-schema';
+import { layoutSectionWithSingleColumn } from '@atlaskit/adf-schema/schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { layoutMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconFiveColumnLayout, IconFourColumnLayout, IconLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/quick-insert';
 import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayoutColumnsWithAnalytics } from './actions';
 import { default as createLayoutPlugin } from './pm-plugins/main';
@@ -20,7 +21,7 @@ export const layoutPlugin = ({
     nodes() {
       return [{
         name: 'layoutSection',
-        node: layoutSection
+        node: isPreRelease2() ? layoutSectionWithSingleColumn : layoutSection
       }, {
         name: 'layoutColumn',
         node: layoutColumn
@@ -52,7 +53,7 @@ export const layoutPlugin = ({
         formatMessage
       }) => isPreRelease2() ? [{
         id: 'twocolumnslayout',
-        title: formatMessage(messages.twoColumns),
+        title: formatMessage(layoutMessages.twoColumns),
         description: formatMessage(messages.columnsDescription),
         keywords: ['layout', 'column', 'section', 'two column'],
         priority: 1100,
@@ -63,7 +64,7 @@ export const layoutPlugin = ({
         }
       }, {
         id: 'threecolumnslayout',
-        title: formatMessage(messages.threeColumns),
+        title: formatMessage(layoutMessages.threeColumns),
         description: formatMessage(messages.columnsDescription),
         keywords: ['layout', 'column', 'section', 'three column'],
         priority: 1100,
@@ -74,7 +75,7 @@ export const layoutPlugin = ({
         }
       }, {
         id: 'fourcolumnslayout',
-        title: formatMessage(messages.fourColumns),
+        title: formatMessage(layoutMessages.fourColumns),
         description: formatMessage(messages.columnsDescription),
         keywords: ['layout', 'column', 'section', 'four column'],
         priority: 1100,
@@ -85,7 +86,7 @@ export const layoutPlugin = ({
         }
       }, {
         id: 'fivecolumnslayout',
-        title: formatMessage(messages.fiveColumns),
+        title: formatMessage(layoutMessages.fiveColumns),
         description: formatMessage(messages.columnsDescription),
         keywords: ['layout', 'column', 'section', 'five column'],
         priority: 1100,

package/dist/es2019/toolbar.js

@@ -1,4 +1,4 @@
-import commonMessages, { layoutMessages as toolbarMessages } from '@atlaskit/editor-common/messages';
+import commonMessages, { layoutMessages, layoutMessages as toolbarMessages } from '@atlaskit/editor-common/messages';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import LayoutOneColumnIcon from '@atlaskit/icon/core/layout-one-column';
@@ -15,6 +15,7 @@ import LayoutTwoLeftSidebarIcon from '@atlaskit/icon/glyph/editor/layout-two-lef
 import LayoutTwoRightSidebarIcon from '@atlaskit/icon/glyph/editor/layout-two-right-sidebar';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import { deleteActiveLayoutNode, getPresetLayout, setPresetLayout } from './actions';
+import { isPreRelease2 } from './utils/preRelease';
 const LAYOUT_TYPES = [{
   id: 'editor.layout.twoEquals',
   type: 'two_equal',
@@ -66,6 +67,7 @@ const buildLayoutButton = (intl, item, currentLayout, editorAnalyticsAPI) => ({
   tabIndex: null
 });
 export const layoutToolbarTitle = 'Layout floating controls';
+const iconPlaceholder = LayoutTwoColumnsIcon; // TODO: Replace with proper icon ED-25466
 export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api) => {
   var _api$decorations$acti, _api$decorations, _api$analytics;
   const {
@@ -75,6 +77,7 @@ 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'
     };
@@ -95,13 +98,61 @@ export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts
       onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
       tabIndex: null
     };
-    const layoutTypes = allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
+    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: () => {
+        // TODO: Implement layout update in ED-25053
+        return true;
+      },
+      selected: numberOfColumns === 4
+    }, {
+      title: intl.formatMessage(layoutMessages.columnOption, {
+        count: 5
+      }),
+      //'5-columns'
+      icon: iconPlaceholder,
+      onClick: () => {
+        // TODO: Implement layout update in ED-25053
+        return true;
+      },
+      selected: numberOfColumns === 5
+    }];
     return {
       title: layoutToolbarTitle,
       getDomRef: view => findDomRefAtPos(pos, view.domAtPos.bind(view)),
       nodeType,
       groupLabel: intl.formatMessage(toolbarMessages.floatingToolbarRadioGroupAriaLabel),
-      items: [...layoutTypes.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)), ...(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)) : []), separator, {
+      items: [...(isPreRelease2() ? [{
+        type: 'dropdown',
+        title: intl.formatMessage(layoutMessages.columnOption, {
+          count: numberOfColumns
+        }),
+        //`${numberOfColumns}-columns`,
+        options: columnOptions,
+        showSelected: true,
+        testId: 'column-options-button'
+      }] : []), ...layoutTypes.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)), ...(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)) : []), separator, {
         type: 'copy-button',
         supportsViewMode: true,
         items: [{

package/dist/esm/actions.js

@@ -15,6 +15,26 @@ 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'];
 var getWidthsForPreset = function getWidthsForPreset(presetLayout) {
+  if (isPreRelease2()) {
+    switch (presetLayout) {
+      case 'single':
+        return [100];
+      case 'two_equal':
+        return [50, 50];
+      case 'three_equal':
+        return [33.33, 33.33, 33.33];
+      case 'two_left_sidebar':
+        return [33.33, 66.66];
+      case 'two_right_sidebar':
+        return [66.66, 33.33];
+      case 'three_with_sidebars':
+        return [25, 50, 25];
+      case 'four_equal':
+        return [25, 25, 25, 25];
+      case 'five_equal':
+        return [20, 20, 20, 20, 20];
+    }
+  }
   switch (presetLayout) {
     case 'single':
       return [100];
@@ -29,6 +49,7 @@ var getWidthsForPreset = function getWidthsForPreset(presetLayout) {
     case 'three_with_sidebars':
       return [25, 50, 25];
   }
+  return [];
 };
 
 /**
@@ -39,6 +60,27 @@ export var getPresetLayout = function getPresetLayout(section) {
   var widths = mapChildren(section, function (column) {
     return column.attrs.width;
   }).join(',');
+  if (isPreRelease2()) {
+    switch (widths) {
+      case '100':
+        return 'single';
+      case '33.33,33.33,33.33':
+        return 'three_equal';
+      case '25,50,25':
+        return 'three_with_sidebars';
+      case '50,50':
+        return 'two_equal';
+      case '33.33,66.66':
+        return 'two_left_sidebar';
+      case '66.66,33.33':
+        return 'two_right_sidebar';
+      case '25,25,25,25':
+        return 'four_equal';
+      case '20,20,20,20,20':
+        return 'five_equal';
+    }
+    return;
+  }
   switch (widths) {
     case '100':
       return 'single';
@@ -368,6 +410,26 @@ export var deleteActiveLayoutNode = function deleteActiveLayoutNode(editorAnalyt
   };
 };
 var formatLayoutName = function formatLayoutName(layout) {
+  if (isPreRelease2()) {
+    switch (layout) {
+      case 'single':
+        return LAYOUT_TYPE.SINGLE_COL;
+      case 'two_equal':
+        return LAYOUT_TYPE.TWO_COLS_EQUAL;
+      case 'three_equal':
+        return LAYOUT_TYPE.THREE_COLS_EQUAL;
+      case 'two_left_sidebar':
+        return LAYOUT_TYPE.LEFT_SIDEBAR;
+      case 'two_right_sidebar':
+        return LAYOUT_TYPE.RIGHT_SIDEBAR;
+      case 'three_with_sidebars':
+        return LAYOUT_TYPE.THREE_WITH_SIDEBARS;
+      case 'four_equal':
+        return LAYOUT_TYPE.FOUR_COLS_EQUAL;
+      case 'five_equal':
+        return LAYOUT_TYPE.FIVE_COLS_EQUAL;
+    }
+  }
   switch (layout) {
     case 'single':
       return LAYOUT_TYPE.SINGLE_COL;

package/dist/esm/plugin.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { layoutColumn, layoutSection } from '@atlaskit/adf-schema';
+import { layoutSectionWithSingleColumn } from '@atlaskit/adf-schema/schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { layoutMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconFiveColumnLayout, IconFourColumnLayout, IconLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/quick-insert';
 import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayoutColumnsWithAnalytics } from './actions';
 import { default as createLayoutPlugin } from './pm-plugins/main';
@@ -20,7 +21,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
     nodes: function nodes() {
       return [{
         name: 'layoutSection',
-        node: layoutSection
+        node: isPreRelease2() ? layoutSectionWithSingleColumn : layoutSection
       }, {
         name: 'layoutColumn',
         node: layoutColumn
@@ -53,7 +54,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
         var formatMessage = _ref3.formatMessage;
         return isPreRelease2() ? [{
           id: 'twocolumnslayout',
-          title: formatMessage(messages.twoColumns),
+          title: formatMessage(layoutMessages.twoColumns),
           description: formatMessage(messages.columnsDescription),
           keywords: ['layout', 'column', 'section', 'two column'],
           priority: 1100,
@@ -66,7 +67,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
           }
         }, {
           id: 'threecolumnslayout',
-          title: formatMessage(messages.threeColumns),
+          title: formatMessage(layoutMessages.threeColumns),
           description: formatMessage(messages.columnsDescription),
           keywords: ['layout', 'column', 'section', 'three column'],
           priority: 1100,
@@ -79,7 +80,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
           }
         }, {
           id: 'fourcolumnslayout',
-          title: formatMessage(messages.fourColumns),
+          title: formatMessage(layoutMessages.fourColumns),
           description: formatMessage(messages.columnsDescription),
           keywords: ['layout', 'column', 'section', 'four column'],
           priority: 1100,
@@ -92,7 +93,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
           }
         }, {
           id: 'fivecolumnslayout',
-          title: formatMessage(messages.fiveColumns),
+          title: formatMessage(layoutMessages.fiveColumns),
           description: formatMessage(messages.columnsDescription),
           keywords: ['layout', 'column', 'section', 'five column'],
           priority: 1100,

package/dist/esm/toolbar.js

@@ -1,5 +1,5 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import commonMessages, { layoutMessages as toolbarMessages } from '@atlaskit/editor-common/messages';
+import commonMessages, { layoutMessages, layoutMessages as toolbarMessages } from '@atlaskit/editor-common/messages';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import LayoutOneColumnIcon from '@atlaskit/icon/core/layout-one-column';
@@ -16,6 +16,7 @@ import LayoutTwoLeftSidebarIcon from '@atlaskit/icon/glyph/editor/layout-two-lef
 import LayoutTwoRightSidebarIcon from '@atlaskit/icon/glyph/editor/layout-two-right-sidebar';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import { deleteActiveLayoutNode, getPresetLayout, setPresetLayout } from './actions';
+import { isPreRelease2 } from './utils/preRelease';
 var LAYOUT_TYPES = [{
   id: 'editor.layout.twoEquals',
   type: 'two_equal',
@@ -69,6 +70,7 @@ var buildLayoutButton = function buildLayoutButton(intl, item, currentLayout, ed
   };
 };
 export var layoutToolbarTitle = 'Layout floating controls';
+var iconPlaceholder = LayoutTwoColumnsIcon; // TODO: Replace with proper icon ED-25466
 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 : {},
@@ -77,6 +79,7 @@ export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout
   var node = state.doc.nodeAt(pos);
   if (node) {
     var currentLayout = getPresetLayout(node);
+    var numberOfColumns = node.content.childCount || 2;
     var separator = {
       type: 'separator'
     };
@@ -97,7 +100,46 @@ export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout
       onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
       tabIndex: null
     };
-    var layoutTypes = allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
+    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: function onClick() {
+        // TODO: Implement layout update in ED-25053
+        return true;
+      },
+      selected: numberOfColumns === 4
+    }, {
+      title: intl.formatMessage(layoutMessages.columnOption, {
+        count: 5
+      }),
+      //'5-columns'
+      icon: iconPlaceholder,
+      onClick: function onClick() {
+        // TODO: Implement layout update in ED-25053
+        return true;
+      },
+      selected: numberOfColumns === 5
+    }];
     return {
       title: layoutToolbarTitle,
       getDomRef: function getDomRef(view) {
@@ -105,7 +147,16 @@ export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout
       },
       nodeType: nodeType,
       groupLabel: intl.formatMessage(toolbarMessages.floatingToolbarRadioGroupAriaLabel),
-      items: [].concat(_toConsumableArray(layoutTypes.map(function (i) {
+      items: [].concat(_toConsumableArray(isPreRelease2() ? [{
+        type: 'dropdown',
+        title: intl.formatMessage(layoutMessages.columnOption, {
+          count: numberOfColumns
+        }),
+        //`${numberOfColumns}-columns`,
+        options: columnOptions,
+        showSelected: true,
+        testId: 'column-options-button'
+      }] : []), _toConsumableArray(layoutTypes.map(function (i) {
         return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
       })), _toConsumableArray(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(function (i) {
         return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);

package/dist/types/types.d.ts

@@ -5,7 +5,7 @@ export interface LayoutPluginOptions extends LongPressSelectionPluginOptions {
     UNSAFE_addSidebarLayouts?: boolean;
     UNSAFE_allowSingleColumnLayout?: boolean;
 }
-export type PresetLayout = 'single' | 'two_equal' | 'three_equal' | 'two_right_sidebar' | 'two_left_sidebar' | 'three_with_sidebars';
+export type PresetLayout = 'single' | 'two_equal' | 'three_equal' | 'two_right_sidebar' | 'two_left_sidebar' | 'three_with_sidebars' | 'four_equal' | 'five_equal';
 export interface Change {
     from: number;
     to: number;

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

@@ -5,7 +5,7 @@ export interface LayoutPluginOptions extends LongPressSelectionPluginOptions {
     UNSAFE_addSidebarLayouts?: boolean;
     UNSAFE_allowSingleColumnLayout?: boolean;
 }
-export type PresetLayout = 'single' | 'two_equal' | 'three_equal' | 'two_right_sidebar' | 'two_left_sidebar' | 'three_with_sidebars';
+export type PresetLayout = 'single' | 'two_equal' | 'three_equal' | 'two_right_sidebar' | 'two_left_sidebar' | 'three_with_sidebars' | 'four_equal' | 'five_equal';
 export interface Change {
     from: number;
     to: number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-layout",
-	"version": "1.9.5",
+	"version": "1.9.7",
 	"description": "Layout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,13 +32,13 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^42.3.1",
-		"@atlaskit/editor-common": "^94.2.0",
+		"@atlaskit/editor-common": "^94.4.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
 		"@atlaskit/editor-plugin-decorations": "^1.3.0",
 		"@atlaskit/editor-prosemirror": "6.0.0",
 		"@atlaskit/icon": "^22.24.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/tmp-editor-statsig": "^2.8.0",
+		"@atlaskit/tmp-editor-statsig": "^2.9.0",
 		"@atlaskit/tokens": "^2.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"