@atlaskit/editor-plugin-layout 1.9.6 → 1.9.8

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-layout
 
+## 1.9.8
+
+### Patch Changes
+
+- [#158827](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/158827)
+  [`6696a5d9665c7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6696a5d9665c7) -
+  Refactor forceColumnStructure so it works for 2-5 columns layout under advanced_layout experiment
+
+## 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

package/dist/cjs/actions.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.fixColumnStructure = exports.fixColumnSizes = exports.deleteActiveLayoutNode = exports.createMultiColumnLayoutSection = exports.createDefaultLayoutSection = exports.TWO_COL_LAYOUTS = exports.THREE_COL_LAYOUTS = exports.ONE_COL_LAYOUTS = void 0;
+exports.fixColumnStructure = exports.fixColumnSizes = exports.deleteActiveLayoutNode = exports.createMultiColumnLayoutSection = exports.createDefaultLayoutSection = exports.TWO_COL_LAYOUTS = exports.THREE_COL_LAYOUTS = exports.ONE_COL_LAYOUTS = exports.FOUR_COL_LAYOUTS = exports.FIVE_COL_LAYOUTS = void 0;
 exports.forceSectionToPresetLayout = forceSectionToPresetLayout;
 exports.setPresetLayout = exports.insertLayoutColumnsWithAnalytics = exports.insertLayoutColumns = exports.getSelectedLayout = exports.getPresetLayout = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -23,7 +23,29 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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 FOUR_COL_LAYOUTS = exports.FOUR_COL_LAYOUTS = ['four_equal'];
+var FIVE_COL_LAYOUTS = exports.FIVE_COL_LAYOUTS = ['five_equal'];
 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 +60,7 @@ var getWidthsForPreset = function getWidthsForPreset(presetLayout) {
     case 'three_with_sidebars':
       return [25, 50, 25];
   }
+  return [];
 };
 
 /**
@@ -48,6 +71,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';
@@ -182,6 +226,28 @@ var fromThreeColstoOne = function fromThreeColstoOne(node, tr, insideRightEdgePo
   var secondColumn = node.content.child(1);
   fromTwoColsToOne(secondColumn, insideRightEdgePos - thirdColumn.nodeSize - secondColumn.nodeSize, insideRightEdgePos)(tr);
 };
+var increaseColumns = function increaseColumns(schema, pos) {
+  var newColumnsNumber = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  var formatMessage = arguments.length > 3 ? arguments[3] : undefined;
+  return function (tr) {
+    for (var i = 0; i < newColumnsNumber; i++) {
+      addColumn(schema, pos, formatMessage)(tr);
+    }
+  };
+};
+var decreaseColumns = function decreaseColumns(node, insideRightEdgePos) {
+  var columnsNumberToRemove = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  return function (tr) {
+    var endPos = insideRightEdgePos;
+    var lastColumn = node.content.lastChild;
+    for (var i = 0; i < columnsNumberToRemove; i++) {
+      var _lastColumn;
+      lastColumn && removeLastColumnInLayout(lastColumn, endPos - lastColumn.nodeSize, endPos)(tr);
+      endPos -= ((_lastColumn = lastColumn) === null || _lastColumn === void 0 ? void 0 : _lastColumn.nodeSize) || 0;
+      lastColumn = node.content.child(node.childCount - i - 2);
+    }
+  };
+};
 
 /**
  * Handles switching from 2 -> 3 cols, or 3 -> 2 cols
@@ -223,6 +289,18 @@ function forceColumnStructure(state, node, pos, presetLayout, formatMessage) {
   }
   return tr;
 }
+function forceColumnStructureNew(state, node, pos, presetLayout, formatMessage) {
+  var tr = state.tr;
+  var insideRightEdgeOfLayoutSection = pos + node.nodeSize - 1;
+  var numCols = node.childCount;
+  var columnChange = getWidthsForPreset(presetLayout).length - numCols;
+  if (columnChange > 0) {
+    increaseColumns(state.schema, insideRightEdgeOfLayoutSection, columnChange, formatMessage)(tr);
+  } else if (columnChange < 0) {
+    decreaseColumns(node, insideRightEdgeOfLayoutSection, -columnChange)(tr);
+  }
+  return tr;
+}
 function columnWidth(node, schema, widths) {
   var layoutColumn = schema.nodes.layoutColumn;
   var truncatedWidths = widths.map(function (w) {
@@ -246,7 +324,8 @@ function forceColumnWidths(state, tr, pos, presetLayout) {
   return tr.replaceWith(pos + 1, pos + node.nodeSize - 1, columnWidth(node, state.schema, getWidthsForPreset(presetLayout)));
 }
 function forceSectionToPresetLayout(state, node, pos, presetLayout, formatMessage) {
-  var tr = forceColumnStructure(state, node, pos, presetLayout, formatMessage);
+  var forceColumnStructureFn = (0, _preRelease.isPreRelease2)() ? forceColumnStructureNew : forceColumnStructure;
+  var tr = forceColumnStructureFn(state, node, pos, presetLayout, formatMessage);
 
   // save the selection here, since forcing column widths causes a change over the
   // entire layoutSection, which remaps selection to the end. not remapping here
@@ -377,6 +456,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/toolbar.js

@@ -133,10 +133,7 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos
       }),
       //'4-columns'
       icon: iconPlaceholder,
-      onClick: function onClick() {
-        // TODO: Implement layout update in ED-25053
-        return true;
-      },
+      onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('four_equal', intl.formatMessage),
       selected: numberOfColumns === 4
     }, {
       title: intl.formatMessage(_messages.layoutMessages.columnOption, {
@@ -144,10 +141,7 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos
       }),
       //'5-columns'
       icon: iconPlaceholder,
-      onClick: function onClick() {
-        // TODO: Implement layout update in ED-25053
-        return true;
-      },
+      onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('five_equal', intl.formatMessage),
       selected: numberOfColumns === 5
     }];
     return {

package/dist/es2019/actions.js

@@ -11,7 +11,29 @@ import { isPreRelease2 } from './utils/preRelease';
 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'];
+export const FOUR_COL_LAYOUTS = ['four_equal'];
+export const FIVE_COL_LAYOUTS = ['five_equal'];
 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 +48,7 @@ const getWidthsForPreset = presetLayout => {
     case 'three_with_sidebars':
       return [25, 50, 25];
   }
+  return [];
 };
 
 /**
@@ -34,6 +57,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';
@@ -165,6 +209,25 @@ const fromThreeColstoOne = (node, tr, insideRightEdgePos) => {
   const secondColumn = node.content.child(1);
   fromTwoColsToOne(secondColumn, insideRightEdgePos - thirdColumn.nodeSize - secondColumn.nodeSize, insideRightEdgePos)(tr);
 };
+const increaseColumns = (schema, pos, newColumnsNumber = 1, formatMessage) => {
+  return tr => {
+    for (let i = 0; i < newColumnsNumber; i++) {
+      addColumn(schema, pos, formatMessage)(tr);
+    }
+  };
+};
+const decreaseColumns = (node, insideRightEdgePos, columnsNumberToRemove = 1) => {
+  return tr => {
+    let endPos = insideRightEdgePos;
+    let lastColumn = node.content.lastChild;
+    for (let i = 0; i < columnsNumberToRemove; i++) {
+      var _lastColumn;
+      lastColumn && removeLastColumnInLayout(lastColumn, endPos - lastColumn.nodeSize, endPos)(tr);
+      endPos -= ((_lastColumn = lastColumn) === null || _lastColumn === void 0 ? void 0 : _lastColumn.nodeSize) || 0;
+      lastColumn = node.content.child(node.childCount - i - 2);
+    }
+  };
+};
 
 /**
  * Handles switching from 2 -> 3 cols, or 3 -> 2 cols
@@ -206,6 +269,18 @@ function forceColumnStructure(state, node, pos, presetLayout, formatMessage) {
   }
   return tr;
 }
+function forceColumnStructureNew(state, node, pos, presetLayout, formatMessage) {
+  const tr = state.tr;
+  const insideRightEdgeOfLayoutSection = pos + node.nodeSize - 1;
+  const numCols = node.childCount;
+  const columnChange = getWidthsForPreset(presetLayout).length - numCols;
+  if (columnChange > 0) {
+    increaseColumns(state.schema, insideRightEdgeOfLayoutSection, columnChange, formatMessage)(tr);
+  } else if (columnChange < 0) {
+    decreaseColumns(node, insideRightEdgeOfLayoutSection, -columnChange)(tr);
+  }
+  return tr;
+}
 function columnWidth(node, schema, widths) {
   const {
     layoutColumn
@@ -230,7 +305,8 @@ function forceColumnWidths(state, tr, pos, presetLayout) {
   return tr.replaceWith(pos + 1, pos + node.nodeSize - 1, columnWidth(node, state.schema, getWidthsForPreset(presetLayout)));
 }
 export function forceSectionToPresetLayout(state, node, pos, presetLayout, formatMessage) {
-  let tr = forceColumnStructure(state, node, pos, presetLayout, formatMessage);
+  const forceColumnStructureFn = isPreRelease2() ? forceColumnStructureNew : forceColumnStructure;
+  let tr = forceColumnStructureFn(state, node, pos, presetLayout, formatMessage);
 
   // save the selection here, since forcing column widths causes a change over the
   // entire layoutSection, which remaps selection to the end. not remapping here
@@ -360,6 +436,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/toolbar.js

@@ -121,10 +121,7 @@ export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts
       }),
       //'4-columns'
       icon: iconPlaceholder,
-      onClick: () => {
-        // TODO: Implement layout update in ED-25053
-        return true;
-      },
+      onClick: setPresetLayout(editorAnalyticsAPI)('four_equal', intl.formatMessage),
       selected: numberOfColumns === 4
     }, {
       title: intl.formatMessage(layoutMessages.columnOption, {
@@ -132,10 +129,7 @@ export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts
       }),
       //'5-columns'
       icon: iconPlaceholder,
-      onClick: () => {
-        // TODO: Implement layout update in ED-25053
-        return true;
-      },
+      onClick: setPresetLayout(editorAnalyticsAPI)('five_equal', intl.formatMessage),
       selected: numberOfColumns === 5
     }];
     return {

package/dist/esm/actions.js

@@ -14,7 +14,29 @@ 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) {
+      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 +51,7 @@ var getWidthsForPreset = function getWidthsForPreset(presetLayout) {
     case 'three_with_sidebars':
       return [25, 50, 25];
   }
+  return [];
 };
 
 /**
@@ -39,6 +62,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';
@@ -173,6 +217,28 @@ var fromThreeColstoOne = function fromThreeColstoOne(node, tr, insideRightEdgePo
   var secondColumn = node.content.child(1);
   fromTwoColsToOne(secondColumn, insideRightEdgePos - thirdColumn.nodeSize - secondColumn.nodeSize, insideRightEdgePos)(tr);
 };
+var increaseColumns = function increaseColumns(schema, pos) {
+  var newColumnsNumber = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  var formatMessage = arguments.length > 3 ? arguments[3] : undefined;
+  return function (tr) {
+    for (var i = 0; i < newColumnsNumber; i++) {
+      addColumn(schema, pos, formatMessage)(tr);
+    }
+  };
+};
+var decreaseColumns = function decreaseColumns(node, insideRightEdgePos) {
+  var columnsNumberToRemove = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  return function (tr) {
+    var endPos = insideRightEdgePos;
+    var lastColumn = node.content.lastChild;
+    for (var i = 0; i < columnsNumberToRemove; i++) {
+      var _lastColumn;
+      lastColumn && removeLastColumnInLayout(lastColumn, endPos - lastColumn.nodeSize, endPos)(tr);
+      endPos -= ((_lastColumn = lastColumn) === null || _lastColumn === void 0 ? void 0 : _lastColumn.nodeSize) || 0;
+      lastColumn = node.content.child(node.childCount - i - 2);
+    }
+  };
+};
 
 /**
  * Handles switching from 2 -> 3 cols, or 3 -> 2 cols
@@ -214,6 +280,18 @@ function forceColumnStructure(state, node, pos, presetLayout, formatMessage) {
   }
   return tr;
 }
+function forceColumnStructureNew(state, node, pos, presetLayout, formatMessage) {
+  var tr = state.tr;
+  var insideRightEdgeOfLayoutSection = pos + node.nodeSize - 1;
+  var numCols = node.childCount;
+  var columnChange = getWidthsForPreset(presetLayout).length - numCols;
+  if (columnChange > 0) {
+    increaseColumns(state.schema, insideRightEdgeOfLayoutSection, columnChange, formatMessage)(tr);
+  } else if (columnChange < 0) {
+    decreaseColumns(node, insideRightEdgeOfLayoutSection, -columnChange)(tr);
+  }
+  return tr;
+}
 function columnWidth(node, schema, widths) {
   var layoutColumn = schema.nodes.layoutColumn;
   var truncatedWidths = widths.map(function (w) {
@@ -237,7 +315,8 @@ function forceColumnWidths(state, tr, pos, presetLayout) {
   return tr.replaceWith(pos + 1, pos + node.nodeSize - 1, columnWidth(node, state.schema, getWidthsForPreset(presetLayout)));
 }
 export function forceSectionToPresetLayout(state, node, pos, presetLayout, formatMessage) {
-  var tr = forceColumnStructure(state, node, pos, presetLayout, formatMessage);
+  var forceColumnStructureFn = isPreRelease2() ? forceColumnStructureNew : forceColumnStructure;
+  var tr = forceColumnStructureFn(state, node, pos, presetLayout, formatMessage);
 
   // save the selection here, since forcing column widths causes a change over the
   // entire layoutSection, which remaps selection to the end. not remapping here
@@ -368,6 +447,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/toolbar.js

@@ -123,10 +123,7 @@ export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout
       }),
       //'4-columns'
       icon: iconPlaceholder,
-      onClick: function onClick() {
-        // TODO: Implement layout update in ED-25053
-        return true;
-      },
+      onClick: setPresetLayout(editorAnalyticsAPI)('four_equal', intl.formatMessage),
       selected: numberOfColumns === 4
     }, {
       title: intl.formatMessage(layoutMessages.columnOption, {
@@ -134,10 +131,7 @@ export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout
       }),
       //'5-columns'
       icon: iconPlaceholder,
-      onClick: function onClick() {
-        // TODO: Implement layout update in ED-25053
-        return true;
-      },
+      onClick: setPresetLayout(editorAnalyticsAPI)('five_equal', intl.formatMessage),
       selected: numberOfColumns === 5
     }];
     return {

package/dist/types/actions.d.ts

@@ -7,6 +7,8 @@ import type { Change, PresetLayout } from './types';
 export declare const ONE_COL_LAYOUTS: PresetLayout[];
 export declare const TWO_COL_LAYOUTS: PresetLayout[];
 export declare const THREE_COL_LAYOUTS: PresetLayout[];
+export declare const FOUR_COL_LAYOUTS: PresetLayout[];
+export declare const FIVE_COL_LAYOUTS: PresetLayout[];
 /**
  * Finds layout preset based on the width attrs of all the layoutColumn nodes
  * inside the layoutSection node

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/actions.d.ts

@@ -7,6 +7,8 @@ import type { Change, PresetLayout } from './types';
 export declare const ONE_COL_LAYOUTS: PresetLayout[];
 export declare const TWO_COL_LAYOUTS: PresetLayout[];
 export declare const THREE_COL_LAYOUTS: PresetLayout[];
+export declare const FOUR_COL_LAYOUTS: PresetLayout[];
+export declare const FIVE_COL_LAYOUTS: PresetLayout[];
 /**
  * Finds layout preset based on the width attrs of all the layoutColumn nodes
  * inside the layoutSection node

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.6",
+	"version": "1.9.8",
 	"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.3.0",
+		"@atlaskit/editor-common": "^94.9.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.9.0",
+		"@atlaskit/tmp-editor-statsig": "^2.10.0",
 		"@atlaskit/tokens": "^2.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"