@atlaskit/editor-plugin-layout 1.12.4 → 1.12.6

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-layout
 
+## 1.12.6
+
+### Patch Changes
+
+- [#169290](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/169290)
+  [`128ec4e2667bc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/128ec4e2667bc) -
+  ED-25824 fix invalid layout after undo or other operations.
+
+## 1.12.5
+
+### Patch Changes
+
+- [#165765](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/165765)
+  [`3f441f30e6507`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3f441f30e6507) -
+  Bump adf-schema to 46.0.0
+- [#168790](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/168790)
+  [`e08e221fb797c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e08e221fb797c) -
+  Add new distributions for 3 column layouts for advanced layouts
+- Updated dependencies
+
 ## 1.12.4
 
 ### 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 = exports.FOUR_COL_LAYOUTS = exports.FIVE_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 = 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"));
@@ -15,6 +15,7 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _consts = require("./consts");
 var _pluginKey = require("./pm-plugins/plugin-key");
 var _preRelease = require("./utils/preRelease");
@@ -23,8 +24,6 @@ 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) {
@@ -40,6 +39,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':
@@ -63,11 +66,17 @@ var getWidthsForPreset = function getWidthsForPreset(presetLayout) {
   return [];
 };
 var isValidLayoutWidthDistributions = function isValidLayoutWidthDistributions(layoutSection) {
-  var totalWidth = (0, _utils.mapChildren)(layoutSection, function (column) {
+  var totalWidth = 0;
+  (0, _utils.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;
 };
 
@@ -87,6 +96,10 @@ var getPresetLayout = exports.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':
@@ -383,12 +396,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 = (0, _experiments.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,
@@ -437,8 +468,13 @@ var fixColumnStructure = exports.fixColumnStructure = function fixColumnStructur
     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) && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
+        return forceSectionToPresetLayout(state, node, pos, selectedLayout);
+      }
     }
   }
   return;

package/dist/cjs/toolbar.js

@@ -25,6 +25,8 @@ var _layoutTwoRightSidebar = _interopRequireDefault(require("@atlaskit/icon/glyp
 var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _actions = require("./actions");
+var _LayoutThreeWithLeftSidebars = require("./ui/icons/LayoutThreeWithLeftSidebars");
+var _LayoutThreeWithRightSidebars = require("./ui/icons/LayoutThreeWithRightSidebars");
 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; }
@@ -67,7 +69,9 @@ var SIDEBAR_LAYOUT_TYPES = [{
   icon: _layoutThreeColumnsSidebars.default,
   iconFallback: _layoutThreeWithSidebars.default
 }];
-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: _messages.layoutMessages.twoColumns,
@@ -85,7 +89,8 @@ var LAYOUT_DISTRIBUTION_TYPES = [{
   title: _messages.layoutMessages.leftSidebar,
   icon: _layoutTwoColumnsSidebarLeft.default,
   iconFallback: _layoutTwoLeftSidebar.default
-}, {
+}];
+var LAYOUT_WITH_THREE_COL_DISTRIBUTION = [{
   id: 'editor.layout.threeEquals',
   type: 'three_equal',
   title: _messages.layoutMessages.threeColumns,
@@ -97,13 +102,19 @@ var LAYOUT_DISTRIBUTION_TYPES = [{
   title: _messages.layoutMessages.threeColumnsWithSidebars,
   icon: _layoutThreeColumnsSidebars.default,
   iconFallback: _layoutThreeWithSidebars.default
+}, {
+  id: 'editor.layout.threeRightSidebars',
+  type: 'three_right_sidebars',
+  title: _messages.layoutMessages.threeColumnsWithRightSidebars,
+  icon: _LayoutThreeWithRightSidebars.LayoutThreeWithRightSidebarsIcon,
+  iconFallback: _LayoutThreeWithRightSidebars.LayoutThreeWithRightSidebarsIcon
+}, {
+  id: 'editor.layout.threeLeftSidebars',
+  type: 'three_left_sidebars',
+  title: _messages.layoutMessages.threeColumnsWithLeftSidebars,
+  icon: _LayoutThreeWithLeftSidebars.LayoutThreeWithLeftSidebarsIcon,
+  iconFallback: _LayoutThreeWithLeftSidebars.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,
@@ -119,15 +130,81 @@ 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 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(_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: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('four_equal', intl.formatMessage),
+    selected: numberOfColumns === 4
+  }, {
+    title: intl.formatMessage(_messages.layoutMessages.columnOption, {
+      count: 5
+    }),
+    //'5-columns'
+    icon: iconPlaceholder,
+    onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('five_equal', intl.formatMessage),
+    selected: numberOfColumns === 5
+  }];
+  return [{
+    type: 'dropdown',
+    title: intl.formatMessage(_messages.layoutMessages.columnOption, {
+      count: numberOfColumns
+    }),
+    //`${numberOfColumns}-columns`,
+    options: columnOptions,
+    showSelected: true,
+    testId: 'column-options-button'
+  }].concat((0, _toConsumableArray2.default)(distributionOptions.length > 0 ? [separator] : []), (0, _toConsumableArray2.default)(addSidebarLayouts ? distributionOptions.map(function (i) {
+    return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
+  }) : []), [separator, {
+    type: 'copy-button',
+    supportsViewMode: !(0, _platformFeatureFlags.fg)('platform_editor_remove_copy_button_from_view_mode'),
+    items: [{
+      state: state,
+      formatMessage: intl.formatMessage,
+      nodeType: nodeType
+    }]
+  }, separator, deleteButton]);
+};
 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 : {},
-    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 = (0, _actions.getPresetLayout)(node);
-    var numberOfColumns = node.content.childCount || 2;
     var separator = {
       type: 'separator'
     };
@@ -148,41 +225,7 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos
       onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
       tabIndex: null
     };
-    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: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('four_equal', intl.formatMessage),
-      selected: numberOfColumns === 4
-    }, {
-      title: intl.formatMessage(_messages.layoutMessages.columnOption, {
-        count: 5
-      }),
-      //'5-columns'
-      icon: iconPlaceholder,
-      onClick: (0, _actions.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) {
@@ -190,20 +233,19 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos
       },
       nodeType: nodeType,
       groupLabel: intl.formatMessage(_messages.layoutMessages.floatingToolbarRadioGroupAriaLabel),
-      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'
-      }].concat((0, _toConsumableArray2.default)(sidebarTypesByColumns.length > 0 ? [separator] : [])) : []), (0, _toConsumableArray2.default)(layoutTypes.map(function (i) {
-        return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
-      })), (0, _toConsumableArray2.default)(addSidebarLayouts ? (0, _preRelease.isPreRelease2)() ? sidebarTypesByColumns.map(function (i) {
+      items: (0, _preRelease.isPreRelease2)() ? getAdvancedLayoutItems({
+        addSidebarLayouts: addSidebarLayouts,
+        intl: intl,
+        editorAnalyticsAPI: editorAnalyticsAPI,
+        state: state,
+        nodeType: nodeType,
+        node: node,
+        separator: separator,
+        deleteButton: deleteButton,
+        currentLayout: currentLayout
+      }) : [].concat((0, _toConsumableArray2.default)(layoutTypes.map(function (i) {
         return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
-      }) : SIDEBAR_LAYOUT_TYPES.map(function (i) {
+      })), (0, _toConsumableArray2.default)(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(function (i) {
         return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
       }) : []), [separator, {
         type: 'copy-button',

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

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LayoutThreeWithLeftSidebarsIcon = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = require("@emotion/react");
+var _icon = _interopRequireDefault(require("@atlaskit/icon"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+
+var LayoutThreeWithLeftSidebarsGlyph = function LayoutThreeWithLeftSidebarsGlyph(props) {
+  if ((0, _platformFeatureFlags.fg)('platform-visual-refresh-icons')) {
+    return (0, _react.jsx)("svg", (0, _extends2.default)({
+      width: "16",
+      height: "14",
+      viewBox: "0 0 16 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), (0, _react.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 (0, _react.jsx)("svg", (0, _extends2.default)({
+    width: "16",
+    height: "14",
+    viewBox: "0 0 16 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), (0, _react.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 = (0, _react.css)({
+  paddingRight: "var(--ds-space-050, 4px)",
+  paddingLeft: "var(--ds-space-050, 4px)"
+});
+var LayoutThreeWithLeftSidebarsIcon = exports.LayoutThreeWithLeftSidebarsIcon = function LayoutThreeWithLeftSidebarsIcon(props) {
+  return (0, _react.jsx)("span", {
+    css: floatingToolbarPadding
+  }, (0, _react.jsx)(_icon.default, (0, _extends2.default)({
+    glyph: LayoutThreeWithLeftSidebarsGlyph
+  }, props)));
+};

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

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LayoutThreeWithRightSidebarsIcon = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = require("@emotion/react");
+var _icon = _interopRequireDefault(require("@atlaskit/icon"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+
+var LayoutThreeWithRightSidebarsGlyph = function LayoutThreeWithRightSidebarsGlyph(props) {
+  if ((0, _platformFeatureFlags.fg)('platform-visual-refresh-icons')) {
+    return (0, _react.jsx)("svg", (0, _extends2.default)({
+      width: "16",
+      height: "14",
+      viewBox: "0 0 16 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), (0, _react.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 (0, _react.jsx)("svg", (0, _extends2.default)({
+    width: "16",
+    height: "14",
+    viewBox: "0 0 16 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), (0, _react.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"
+  }));
+};
+var floatingToolbarPadding = (0, _react.css)({
+  paddingRight: "var(--ds-space-050, 4px)",
+  paddingLeft: "var(--ds-space-050, 4px)"
+});
+var LayoutThreeWithRightSidebarsIcon = exports.LayoutThreeWithRightSidebarsIcon = function LayoutThreeWithRightSidebarsIcon(props) {
+  return (0, _react.jsx)("span", {
+    css: floatingToolbarPadding
+  }, (0, _react.jsx)(_icon.default, (0, _extends2.default)({
+    glyph: LayoutThreeWithRightSidebarsGlyph
+  }, props)));
+};

package/dist/es2019/actions.js

@@ -5,14 +5,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 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) {
@@ -28,6 +27,10 @@ const 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':
@@ -51,9 +54,15 @@ const getWidthsForPreset = presetLayout => {
   return [];
 };
 const isValidLayoutWidthDistributions = layoutSection => {
-  const totalWidth = mapChildren(layoutSection, column => column.attrs.width).reduce((total, width) => {
-    return total + width;
-  }, 0);
+  let totalWidth = 0;
+  mapChildren(layoutSection, column => column.attrs.width).forEach(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;
 };
 
@@ -71,6 +80,10 @@ export const 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':
@@ -359,12 +372,30 @@ function layoutNeedChanges(node) {
   }
   return !getPresetLayout(node);
 }
+const getDefaultPresetLayout = layoutNode => {
+  const 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;
     }
-    const presetLayout = node.childCount === 2 ? 'two_equal' : node.childCount === 3 ? 'three_equal' : 'single';
+    const presetLayout = editorExperiment('advanced_layouts', true) ? getDefaultPresetLayout(node) : node.childCount === 2 ? 'two_equal' : node.childCount === 3 ? 'three_equal' : 'single';
     const fixedColumns = columnWidth(node, schema, getWidthsForPreset(presetLayout));
     return {
       from: pos + 1,
@@ -416,8 +447,13 @@ export const fixColumnStructure = state => {
   } = pluginKey.getState(state);
   if (pos !== null && selectedLayout) {
     const 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;