@atlaskit/editor-plugin-layout 1.12.9 → 1.12.11

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/editor-plugin-layout
 
+## 1.12.11
+
+### Patch Changes
+
+- [#171974](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/171974)
+  [`bc888f2b9c449`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bc888f2b9c449) -
+  Fire analytics event from BreakoutResizer component when breakout is resized
+- [#171077](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/171077)
+  [`0a92cf56671ac`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0a92cf56671ac) -
+  ED-25867 always show drag handler for layout columns
+- Updated dependencies
+
+## 1.12.10
+
+### Patch Changes
+
+- [#171014](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/171014)
+  [`6163248356c63`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6163248356c63) -
+  [ED-25833] Replace the following FGs with experiment `platform_editor_advanced_layouts`
+
+  - platform_editor_advanced_layouts_breakout_resizing
+  - platform_editor_advanced_layouts_pre_release_1
+  - platform_editor_advanced_layouts_pre_release_2
+
 ## 1.12.9
 
 ### Patch Changes

package/dist/cjs/layoutPlugin.js

@@ -17,12 +17,11 @@ 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");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _actions = require("./pm-plugins/actions");
 var _main = _interopRequireDefault(require("./pm-plugins/main"));
 var _pluginKey = require("./pm-plugins/plugin-key");
 var _resizing = _interopRequireDefault(require("./pm-plugins/resizing"));
-var _preRelease = require("./pm-plugins/utils/preRelease");
 var _globalStyles = require("./ui/global-styles");
 var _toolbar = require("./ui/toolbar");
 var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
@@ -35,7 +34,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
     nodes: function nodes() {
       return [{
         name: 'layoutSection',
-        node: (0, _preRelease.isPreRelease2)() ? _schema.layoutSectionWithSingleColumn : _adfSchema.layoutSection
+        node: (0, _experiments.editorExperiment)('advanced_layouts', true) ? _schema.layoutSectionWithSingleColumn : _adfSchema.layoutSection
       }, {
         name: 'layoutColumn',
         node: _adfSchema.layoutColumn
@@ -48,7 +47,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
           return (0, _main.default)(options);
         }
       }];
-      if ((options.editorAppearance === 'full-page' || options.editorAppearance === 'full-width') && api && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_breakout_resizing')) {
+      if ((options.editorAppearance === 'full-page' || options.editorAppearance === 'full-width') && api && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
         plugins.push({
           name: 'layoutResizing',
           plugin: function plugin(_ref2) {
@@ -77,7 +76,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
       },
       quickInsert: function quickInsert(_ref4) {
         var formatMessage = _ref4.formatMessage;
-        return (0, _preRelease.isPreRelease2)() ? [{
+        return (0, _experiments.editorExperiment)('advanced_layouts', true) ? [{
           id: 'twocolumnslayout',
           title: formatMessage(_messages.layoutMessages.twoColumns),
           description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescription),
@@ -156,7 +155,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
       }
     },
     contentComponent: function contentComponent() {
-      return (0, _preRelease.isPreRelease2)() ? /*#__PURE__*/_react.default.createElement(_globalStyles.GlobalStylesWrapper, null) : null;
+      return (0, _experiments.editorExperiment)('advanced_layouts', true) ? /*#__PURE__*/_react.default.createElement(_globalStyles.GlobalStylesWrapper, null) : null;
     }
   };
 };

package/dist/cjs/nodeviews/index.js

@@ -18,6 +18,7 @@ var _model = require("@atlaskit/editor-prosemirror/model");
 function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
+  var _pluginInjectionApi$a;
   var pluginInjectionApi = _ref.pluginInjectionApi,
     forwardRef = _ref.forwardRef,
     getPos = _ref.getPos,
@@ -36,7 +37,8 @@ var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
     nodeType: "layoutSection",
     getEditorWidth: getEditorWidth,
     disabled: (editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled) === true,
-    parentRef: parentRef
+    parentRef: parentRef,
+    editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions
   });
 };
 var toDOM = function toDOM() {

package/dist/cjs/pm-plugins/actions.js

@@ -17,14 +17,13 @@ var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _consts = require("./consts");
 var _pluginKey = require("./plugin-key");
-var _preRelease = require("./utils/preRelease");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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)()) {
+  if ((0, _experiments.editorExperiment)('advanced_layouts', true)) {
     switch (presetLayout) {
       case 'single':
         return [100];
@@ -66,17 +65,17 @@ var getWidthsForPreset = function getWidthsForPreset(presetLayout) {
 };
 var isValidLayoutWidthDistributions = function isValidLayoutWidthDistributions(layoutSection) {
   var totalWidth = 0;
+  var hasInvalidWidth = false;
   (0, _utils.mapChildren)(layoutSection, function (column) {
     return column.attrs.width;
   }).forEach(function (width) {
     if (typeof width === 'number' && isFinite(width) && width > 0 && width <= 100) {
       totalWidth += width;
+    } else {
+      hasInvalidWidth = true;
     }
-
-    // not a valid width, e.g. 0, 100, undefined
-    return false;
   });
-  return Math.round(totalWidth) === 100;
+  return !hasInvalidWidth && Math.round(totalWidth) === 100;
 };
 
 /**
@@ -87,7 +86,7 @@ var getPresetLayout = exports.getPresetLayout = function getPresetLayout(section
   var widths = (0, _utils.mapChildren)(section, function (column) {
     return column.attrs.width;
   }).join(',');
-  if ((0, _preRelease.isPreRelease2)()) {
+  if ((0, _experiments.editorExperiment)('advanced_layouts', true)) {
     switch (widths) {
       case '100':
         return 'single';
@@ -128,7 +127,13 @@ var getPresetLayout = exports.getPresetLayout = function getPresetLayout(section
   }
   return;
 };
+var isLayoutOutOfSync = function isLayoutOutOfSync(node, presetLayout) {
+  return node.childCount !== getWidthsForPreset(presetLayout).length;
+};
 var getSelectedLayout = exports.getSelectedLayout = function getSelectedLayout(maybeLayoutSection, current) {
+  if (maybeLayoutSection && isLayoutOutOfSync(maybeLayoutSection, current) && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
+    return getDefaultPresetLayout(maybeLayoutSection);
+  }
   if (maybeLayoutSection && getPresetLayout(maybeLayoutSection)) {
     return getPresetLayout(maybeLayoutSection) || current;
   }
@@ -190,7 +195,7 @@ var insertLayoutColumnsWithAnalytics = exports.insertLayoutColumnsWithAnalytics
  * Add a column to the right of existing layout
  */
 function addColumn(schema, pos) {
-  if (!(0, _preRelease.isPreRelease2)()) {
+  if ((0, _experiments.editorExperiment)('advanced_layouts', false)) {
     return function (tr) {
       tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos), schema.nodes.layoutColumn.createAndFill());
     };
@@ -323,7 +328,7 @@ 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) {
-  var forceColumnStructureFn = (0, _preRelease.isPreRelease2)() ? forceColumnStructureNew : forceColumnStructure;
+  var forceColumnStructureFn = (0, _experiments.editorExperiment)('advanced_layouts', true) ? forceColumnStructureNew : forceColumnStructure;
   var tr = forceColumnStructureFn(state, node, pos, presetLayout);
 
   // save the selection here, since forcing column widths causes a change over the
@@ -369,7 +374,7 @@ var setPresetLayout = exports.setPresetLayout = function setPresetLayout(editorA
   };
 };
 function layoutNeedChanges(node) {
-  if ((0, _preRelease.isPreRelease2)()) {
+  if ((0, _experiments.editorExperiment)('advanced_layouts', true)) {
     return !getPresetLayout(node) || !isValidLayoutWidthDistributions(node);
   }
   return !getPresetLayout(node);
@@ -482,7 +487,7 @@ var deleteActiveLayoutNode = exports.deleteActiveLayoutNode = function deleteAct
   };
 };
 var formatLayoutName = function formatLayoutName(layout) {
-  if ((0, _preRelease.isPreRelease2)()) {
+  if ((0, _experiments.editorExperiment)('advanced_layouts', true)) {
     switch (layout) {
       case 'single':
         return _analytics.LAYOUT_TYPE.SINGLE_COL;

package/dist/cjs/pm-plugins/main.js

@@ -13,6 +13,7 @@ var _keymap = require("@atlaskit/editor-prosemirror/keymap");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _actions = require("./actions");
 var _pluginKey = require("./plugin-key");
 var _utils3 = require("./utils");
@@ -66,6 +67,20 @@ var getInitialPluginState = function getInitialPluginState(options, state) {
     allowSingleColumnLayout: allowSingleColumnLayout
   };
 };
+
+// To prevent a single-column layout,
+// if a user attempts to delete a layout column and
+// we will force remove the content instead.
+// There are some edge cases where user can delete a layout column
+// see packages/editor/editor-plugin-layout-tests/src/__tests__/unit/delete.ts
+var handleDeleteLayoutColumn = function handleDeleteLayoutColumn(state, dispatch) {
+  var sel = state.selection;
+  if (sel instanceof _state.NodeSelection && sel.node.type.name === 'layoutColumn' && sel.$from.parent.type.name === 'layoutSection' && sel.$from.parent.childCount === 2 && dispatch && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
+    dispatch(state.tr.deleteRange(sel.from + 1, sel.from + sel.node.content.size));
+    return true;
+  }
+  return false;
+};
 var _default = exports.default = function _default(options) {
   return new _safePlugin.SafePlugin({
     key: _pluginKey.pluginKey,
@@ -94,7 +109,11 @@ var _default = exports.default = function _default(options) {
         return undefined;
       },
       handleKeyDown: (0, _keymap.keydownHandler)({
-        Tab: (0, _utils.filterCommand)(isWholeSelectionInsideLayoutColumn, moveCursorToNextColumn)
+        Tab: (0, _utils.filterCommand)(isWholeSelectionInsideLayoutColumn, moveCursorToNextColumn),
+        'Mod-Backspace': handleDeleteLayoutColumn,
+        'Mod-Delete': handleDeleteLayoutColumn,
+        Backspace: handleDeleteLayoutColumn,
+        Delete: handleDeleteLayoutColumn
       }),
       handleClickOn: (0, _selection.createSelectionClickHandler)(['layoutColumn'], function (target) {
         return target.hasAttribute('data-layout-section') || target.hasAttribute('data-layout-column');

package/dist/cjs/ui/toolbar.js

@@ -24,8 +24,8 @@ 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 _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _actions = require("../pm-plugins/actions");
-var _preRelease = require("../pm-plugins/utils/preRelease");
 var _LayoutThreeWithLeftSidebars = require("./icons/LayoutThreeWithLeftSidebars");
 var _LayoutThreeWithRightSidebars = require("./icons/LayoutThreeWithRightSidebars");
 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); }
@@ -233,7 +233,7 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos
       },
       nodeType: nodeType,
       groupLabel: intl.formatMessage(_messages.layoutMessages.floatingToolbarRadioGroupAriaLabel),
-      items: (0, _preRelease.isPreRelease2)() ? getAdvancedLayoutItems({
+      items: (0, _experiments.editorExperiment)('advanced_layouts', true) ? getAdvancedLayoutItems({
         addSidebarLayouts: addSidebarLayouts,
         intl: intl,
         editorAnalyticsAPI: editorAnalyticsAPI,

package/dist/es2019/layoutPlugin.js

@@ -4,12 +4,11 @@ import { layoutSectionWithSingleColumn } from '@atlaskit/adf-schema/schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { layoutMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconFiveColumnLayout, IconFourColumnLayout, IconLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/quick-insert';
-import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayoutColumnsWithAnalytics } from './pm-plugins/actions';
 import { default as createLayoutPlugin } from './pm-plugins/main';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { default as createLayoutResizingPlugin } from './pm-plugins/resizing';
-import { isPreRelease2 } from './pm-plugins/utils/preRelease';
 import { GlobalStylesWrapper } from './ui/global-styles';
 import { buildToolbar } from './ui/toolbar';
 export { pluginKey };
@@ -23,7 +22,7 @@ export const layoutPlugin = ({
     nodes() {
       return [{
         name: 'layoutSection',
-        node: isPreRelease2() ? layoutSectionWithSingleColumn : layoutSection
+        node: editorExperiment('advanced_layouts', true) ? layoutSectionWithSingleColumn : layoutSection
       }, {
         name: 'layoutColumn',
         node: layoutColumn
@@ -34,7 +33,7 @@ export const layoutPlugin = ({
         name: 'layout',
         plugin: () => createLayoutPlugin(options)
       }];
-      if ((options.editorAppearance === 'full-page' || options.editorAppearance === 'full-width') && api && fg('platform_editor_advanced_layouts_breakout_resizing')) {
+      if ((options.editorAppearance === 'full-page' || options.editorAppearance === 'full-width') && api && editorExperiment('advanced_layouts', true)) {
         plugins.push({
           name: 'layoutResizing',
           plugin: ({
@@ -63,7 +62,7 @@ export const layoutPlugin = ({
       },
       quickInsert: ({
         formatMessage
-      }) => isPreRelease2() ? [{
+      }) => editorExperiment('advanced_layouts', true) ? [{
         id: 'twocolumnslayout',
         title: formatMessage(layoutMessages.twoColumns),
         description: formatMessage(messages.columnsDescription),
@@ -131,7 +130,7 @@ export const layoutPlugin = ({
       }]
     },
     contentComponent() {
-      return isPreRelease2() ? /*#__PURE__*/React.createElement(GlobalStylesWrapper, null) : null;
+      return editorExperiment('advanced_layouts', true) ? /*#__PURE__*/React.createElement(GlobalStylesWrapper, null) : null;
     }
   };
 };

package/dist/es2019/nodeviews/index.js

@@ -10,6 +10,7 @@ const LayoutBreakoutResizer = ({
   view,
   parentRef
 }) => {
+  var _pluginInjectionApi$a;
   const {
     editorDisabledState
   } = useSharedPluginState(pluginInjectionApi, ['editorDisabled']);
@@ -24,7 +25,8 @@ const LayoutBreakoutResizer = ({
     nodeType: "layoutSection",
     getEditorWidth: getEditorWidth,
     disabled: (editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled) === true,
-    parentRef: parentRef
+    parentRef: parentRef,
+    editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions
   });
 };
 const toDOM = () => ['div', {

package/dist/es2019/pm-plugins/actions.js

@@ -7,12 +7,11 @@ 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 './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'];
 const getWidthsForPreset = presetLayout => {
-  if (isPreRelease2()) {
+  if (editorExperiment('advanced_layouts', true)) {
     switch (presetLayout) {
       case 'single':
         return [100];
@@ -54,15 +53,15 @@ const getWidthsForPreset = presetLayout => {
 };
 const isValidLayoutWidthDistributions = layoutSection => {
   let totalWidth = 0;
+  let hasInvalidWidth = false;
   mapChildren(layoutSection, column => column.attrs.width).forEach(width => {
     if (typeof width === 'number' && isFinite(width) && width > 0 && width <= 100) {
       totalWidth += width;
+    } else {
+      hasInvalidWidth = true;
     }
-
-    // not a valid width, e.g. 0, 100, undefined
-    return false;
   });
-  return Math.round(totalWidth) === 100;
+  return !hasInvalidWidth && Math.round(totalWidth) === 100;
 };
 
 /**
@@ -71,7 +70,7 @@ const isValidLayoutWidthDistributions = layoutSection => {
  */
 export const getPresetLayout = section => {
   const widths = mapChildren(section, column => column.attrs.width).join(',');
-  if (isPreRelease2()) {
+  if (editorExperiment('advanced_layouts', true)) {
     switch (widths) {
       case '100':
         return 'single';
@@ -112,7 +111,13 @@ export const getPresetLayout = section => {
   }
   return;
 };
+const isLayoutOutOfSync = (node, presetLayout) => {
+  return node.childCount !== getWidthsForPreset(presetLayout).length;
+};
 export const getSelectedLayout = (maybeLayoutSection, current) => {
+  if (maybeLayoutSection && isLayoutOutOfSync(maybeLayoutSection, current) && editorExperiment('advanced_layouts', true)) {
+    return getDefaultPresetLayout(maybeLayoutSection);
+  }
   if (maybeLayoutSection && getPresetLayout(maybeLayoutSection)) {
     return getPresetLayout(maybeLayoutSection) || current;
   }
@@ -169,7 +174,7 @@ export const insertLayoutColumnsWithAnalytics = editorAnalyticsAPI => inputMetho
  * Add a column to the right of existing layout
  */
 function addColumn(schema, pos) {
-  if (!isPreRelease2()) {
+  if (editorExperiment('advanced_layouts', false)) {
     return tr => {
       tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos), schema.nodes.layoutColumn.createAndFill());
     };
@@ -301,7 +306,7 @@ 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) {
-  const forceColumnStructureFn = isPreRelease2() ? forceColumnStructureNew : forceColumnStructure;
+  const forceColumnStructureFn = editorExperiment('advanced_layouts', true) ? forceColumnStructureNew : forceColumnStructure;
   let tr = forceColumnStructureFn(state, node, pos, presetLayout);
 
   // save the selection here, since forcing column widths causes a change over the
@@ -344,7 +349,7 @@ export const setPresetLayout = editorAnalyticsAPI => layout => (state, dispatch)
   return false;
 };
 function layoutNeedChanges(node) {
-  if (isPreRelease2()) {
+  if (editorExperiment('advanced_layouts', true)) {
     return !getPresetLayout(node) || !isValidLayoutWidthDistributions(node);
   }
   return !getPresetLayout(node);
@@ -459,7 +464,7 @@ export const deleteActiveLayoutNode = editorAnalyticsAPI => (state, dispatch) =>
   return false;
 };
 const formatLayoutName = layout => {
-  if (isPreRelease2()) {
+  if (editorExperiment('advanced_layouts', true)) {
     switch (layout) {
       case 'single':
         return LAYOUT_TYPE.SINGLE_COL;

package/dist/es2019/pm-plugins/main.js

@@ -2,9 +2,10 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { createSelectionClickHandler } from '@atlaskit/editor-common/selection';
 import { filterCommand as filter } from '@atlaskit/editor-common/utils';
 import { keydownHandler } from '@atlaskit/editor-prosemirror/keymap';
-import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { fixColumnSizes, fixColumnStructure, getSelectedLayout } from './actions';
 import { pluginKey } from './plugin-key';
 import { getMaybeLayoutSection } from './utils';
@@ -61,6 +62,20 @@ const getInitialPluginState = (options, state) => {
     allowSingleColumnLayout
   };
 };
+
+// To prevent a single-column layout,
+// if a user attempts to delete a layout column and
+// we will force remove the content instead.
+// There are some edge cases where user can delete a layout column
+// see packages/editor/editor-plugin-layout-tests/src/__tests__/unit/delete.ts
+const handleDeleteLayoutColumn = (state, dispatch) => {
+  const sel = state.selection;
+  if (sel instanceof NodeSelection && sel.node.type.name === 'layoutColumn' && sel.$from.parent.type.name === 'layoutSection' && sel.$from.parent.childCount === 2 && dispatch && editorExperiment('advanced_layouts', true)) {
+    dispatch(state.tr.deleteRange(sel.from + 1, sel.from + sel.node.content.size));
+    return true;
+  }
+  return false;
+};
 export default (options => new SafePlugin({
   key: pluginKey,
   state: {
@@ -87,7 +102,11 @@ export default (options => new SafePlugin({
       return undefined;
     },
     handleKeyDown: keydownHandler({
-      Tab: filter(isWholeSelectionInsideLayoutColumn, moveCursorToNextColumn)
+      Tab: filter(isWholeSelectionInsideLayoutColumn, moveCursorToNextColumn),
+      'Mod-Backspace': handleDeleteLayoutColumn,
+      'Mod-Delete': handleDeleteLayoutColumn,
+      Backspace: handleDeleteLayoutColumn,
+      Delete: handleDeleteLayoutColumn
     }),
     handleClickOn: createSelectionClickHandler(['layoutColumn'], target => target.hasAttribute('data-layout-section') || target.hasAttribute('data-layout-column'), {
       useLongPressSelection: options.useLongPressSelection || false,

package/dist/es2019/ui/toolbar.js

@@ -15,8 +15,8 @@ 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 { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { deleteActiveLayoutNode, getPresetLayout, setPresetLayout } from '../pm-plugins/actions';
-import { isPreRelease2 } from '../pm-plugins/utils/preRelease';
 import { LayoutThreeWithLeftSidebarsIcon } from './icons/LayoutThreeWithLeftSidebars';
 import { LayoutThreeWithRightSidebarsIcon } from './icons/LayoutThreeWithRightSidebars';
 const LAYOUT_TYPES = [{
@@ -218,7 +218,7 @@ export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts
       getDomRef: view => findDomRefAtPos(pos, view.domAtPos.bind(view)),
       nodeType,
       groupLabel: intl.formatMessage(toolbarMessages.floatingToolbarRadioGroupAriaLabel),
-      items: isPreRelease2() ? getAdvancedLayoutItems({
+      items: editorExperiment('advanced_layouts', true) ? getAdvancedLayoutItems({
         addSidebarLayouts,
         intl,
         editorAnalyticsAPI,

package/dist/esm/layoutPlugin.js

@@ -4,12 +4,11 @@ import { layoutSectionWithSingleColumn } from '@atlaskit/adf-schema/schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { layoutMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconFiveColumnLayout, IconFourColumnLayout, IconLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/quick-insert';
-import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayoutColumnsWithAnalytics } from './pm-plugins/actions';
 import { default as createLayoutPlugin } from './pm-plugins/main';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { default as createLayoutResizingPlugin } from './pm-plugins/resizing';
-import { isPreRelease2 } from './pm-plugins/utils/preRelease';
 import { GlobalStylesWrapper } from './ui/global-styles';
 import { buildToolbar } from './ui/toolbar';
 export { pluginKey };
@@ -23,7 +22,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
     nodes: function nodes() {
       return [{
         name: 'layoutSection',
-        node: isPreRelease2() ? layoutSectionWithSingleColumn : layoutSection
+        node: editorExperiment('advanced_layouts', true) ? layoutSectionWithSingleColumn : layoutSection
       }, {
         name: 'layoutColumn',
         node: layoutColumn
@@ -36,7 +35,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
           return createLayoutPlugin(options);
         }
       }];
-      if ((options.editorAppearance === 'full-page' || options.editorAppearance === 'full-width') && api && fg('platform_editor_advanced_layouts_breakout_resizing')) {
+      if ((options.editorAppearance === 'full-page' || options.editorAppearance === 'full-width') && api && editorExperiment('advanced_layouts', true)) {
         plugins.push({
           name: 'layoutResizing',
           plugin: function plugin(_ref2) {
@@ -65,7 +64,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
       },
       quickInsert: function quickInsert(_ref4) {
         var formatMessage = _ref4.formatMessage;
-        return isPreRelease2() ? [{
+        return editorExperiment('advanced_layouts', true) ? [{
           id: 'twocolumnslayout',
           title: formatMessage(layoutMessages.twoColumns),
           description: formatMessage(messages.columnsDescription),
@@ -144,7 +143,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
       }
     },
     contentComponent: function contentComponent() {
-      return isPreRelease2() ? /*#__PURE__*/React.createElement(GlobalStylesWrapper, null) : null;
+      return editorExperiment('advanced_layouts', true) ? /*#__PURE__*/React.createElement(GlobalStylesWrapper, null) : null;
     }
   };
 };

package/dist/esm/nodeviews/index.js

@@ -11,6 +11,7 @@ import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { BreakoutResizer, ignoreResizerMutations } from '@atlaskit/editor-common/resizer';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
+  var _pluginInjectionApi$a;
   var pluginInjectionApi = _ref.pluginInjectionApi,
     forwardRef = _ref.forwardRef,
     getPos = _ref.getPos,
@@ -29,7 +30,8 @@ var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
     nodeType: "layoutSection",
     getEditorWidth: getEditorWidth,
     disabled: (editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled) === true,
-    parentRef: parentRef
+    parentRef: parentRef,
+    editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions
   });
 };
 var toDOM = function toDOM() {

package/dist/esm/pm-plugins/actions.js

@@ -10,12 +10,11 @@ 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 './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'];
 var getWidthsForPreset = function getWidthsForPreset(presetLayout) {
-  if (isPreRelease2()) {
+  if (editorExperiment('advanced_layouts', true)) {
     switch (presetLayout) {
       case 'single':
         return [100];
@@ -57,17 +56,17 @@ var getWidthsForPreset = function getWidthsForPreset(presetLayout) {
 };
 var isValidLayoutWidthDistributions = function isValidLayoutWidthDistributions(layoutSection) {
   var totalWidth = 0;
+  var hasInvalidWidth = false;
   mapChildren(layoutSection, function (column) {
     return column.attrs.width;
   }).forEach(function (width) {
     if (typeof width === 'number' && isFinite(width) && width > 0 && width <= 100) {
       totalWidth += width;
+    } else {
+      hasInvalidWidth = true;
     }
-
-    // not a valid width, e.g. 0, 100, undefined
-    return false;
   });
-  return Math.round(totalWidth) === 100;
+  return !hasInvalidWidth && Math.round(totalWidth) === 100;
 };
 
 /**
@@ -78,7 +77,7 @@ export var getPresetLayout = function getPresetLayout(section) {
   var widths = mapChildren(section, function (column) {
     return column.attrs.width;
   }).join(',');
-  if (isPreRelease2()) {
+  if (editorExperiment('advanced_layouts', true)) {
     switch (widths) {
       case '100':
         return 'single';
@@ -119,7 +118,13 @@ export var getPresetLayout = function getPresetLayout(section) {
   }
   return;
 };
+var isLayoutOutOfSync = function isLayoutOutOfSync(node, presetLayout) {
+  return node.childCount !== getWidthsForPreset(presetLayout).length;
+};
 export var getSelectedLayout = function getSelectedLayout(maybeLayoutSection, current) {
+  if (maybeLayoutSection && isLayoutOutOfSync(maybeLayoutSection, current) && editorExperiment('advanced_layouts', true)) {
+    return getDefaultPresetLayout(maybeLayoutSection);
+  }
   if (maybeLayoutSection && getPresetLayout(maybeLayoutSection)) {
     return getPresetLayout(maybeLayoutSection) || current;
   }
@@ -181,7 +186,7 @@ export var insertLayoutColumnsWithAnalytics = function insertLayoutColumnsWithAn
  * Add a column to the right of existing layout
  */
 function addColumn(schema, pos) {
-  if (!isPreRelease2()) {
+  if (editorExperiment('advanced_layouts', false)) {
     return function (tr) {
       tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos), schema.nodes.layoutColumn.createAndFill());
     };
@@ -314,7 +319,7 @@ 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) {
-  var forceColumnStructureFn = isPreRelease2() ? forceColumnStructureNew : forceColumnStructure;
+  var forceColumnStructureFn = editorExperiment('advanced_layouts', true) ? forceColumnStructureNew : forceColumnStructure;
   var tr = forceColumnStructureFn(state, node, pos, presetLayout);
 
   // save the selection here, since forcing column widths causes a change over the
@@ -360,7 +365,7 @@ export var setPresetLayout = function setPresetLayout(editorAnalyticsAPI) {
   };
 };
 function layoutNeedChanges(node) {
-  if (isPreRelease2()) {
+  if (editorExperiment('advanced_layouts', true)) {
     return !getPresetLayout(node) || !isValidLayoutWidthDistributions(node);
   }
   return !getPresetLayout(node);
@@ -473,7 +478,7 @@ export var deleteActiveLayoutNode = function deleteActiveLayoutNode(editorAnalyt
   };
 };
 var formatLayoutName = function formatLayoutName(layout) {
-  if (isPreRelease2()) {
+  if (editorExperiment('advanced_layouts', true)) {
     switch (layout) {
       case 'single':
         return LAYOUT_TYPE.SINGLE_COL;

package/dist/esm/pm-plugins/main.js

@@ -5,9 +5,10 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { createSelectionClickHandler } from '@atlaskit/editor-common/selection';
 import { filterCommand as filter } from '@atlaskit/editor-common/utils';
 import { keydownHandler } from '@atlaskit/editor-prosemirror/keymap';
-import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { fixColumnSizes, fixColumnStructure, getSelectedLayout } from './actions';
 import { pluginKey } from './plugin-key';
 import { getMaybeLayoutSection } from './utils';
@@ -59,6 +60,20 @@ var getInitialPluginState = function getInitialPluginState(options, state) {
     allowSingleColumnLayout: allowSingleColumnLayout
   };
 };
+
+// To prevent a single-column layout,
+// if a user attempts to delete a layout column and
+// we will force remove the content instead.
+// There are some edge cases where user can delete a layout column
+// see packages/editor/editor-plugin-layout-tests/src/__tests__/unit/delete.ts
+var handleDeleteLayoutColumn = function handleDeleteLayoutColumn(state, dispatch) {
+  var sel = state.selection;
+  if (sel instanceof NodeSelection && sel.node.type.name === 'layoutColumn' && sel.$from.parent.type.name === 'layoutSection' && sel.$from.parent.childCount === 2 && dispatch && editorExperiment('advanced_layouts', true)) {
+    dispatch(state.tr.deleteRange(sel.from + 1, sel.from + sel.node.content.size));
+    return true;
+  }
+  return false;
+};
 export default (function (options) {
   return new SafePlugin({
     key: pluginKey,
@@ -87,7 +102,11 @@ export default (function (options) {
         return undefined;
       },
       handleKeyDown: keydownHandler({
-        Tab: filter(isWholeSelectionInsideLayoutColumn, moveCursorToNextColumn)
+        Tab: filter(isWholeSelectionInsideLayoutColumn, moveCursorToNextColumn),
+        'Mod-Backspace': handleDeleteLayoutColumn,
+        'Mod-Delete': handleDeleteLayoutColumn,
+        Backspace: handleDeleteLayoutColumn,
+        Delete: handleDeleteLayoutColumn
       }),
       handleClickOn: createSelectionClickHandler(['layoutColumn'], function (target) {
         return target.hasAttribute('data-layout-section') || target.hasAttribute('data-layout-column');

package/dist/esm/ui/toolbar.js

@@ -16,8 +16,8 @@ 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 { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { deleteActiveLayoutNode, getPresetLayout, setPresetLayout } from '../pm-plugins/actions';
-import { isPreRelease2 } from '../pm-plugins/utils/preRelease';
 import { LayoutThreeWithLeftSidebarsIcon } from './icons/LayoutThreeWithLeftSidebars';
 import { LayoutThreeWithRightSidebarsIcon } from './icons/LayoutThreeWithRightSidebars';
 var LAYOUT_TYPES = [{
@@ -223,7 +223,7 @@ export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout
       },
       nodeType: nodeType,
       groupLabel: intl.formatMessage(toolbarMessages.floatingToolbarRadioGroupAriaLabel),
-      items: isPreRelease2() ? getAdvancedLayoutItems({
+      items: editorExperiment('advanced_layouts', true) ? getAdvancedLayoutItems({
         addSidebarLayouts: addSidebarLayouts,
         intl: intl,
         editorAnalyticsAPI: editorAnalyticsAPI,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-layout",
-	"version": "1.12.9",
+	"version": "1.12.11",
 	"description": "Layout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -38,9 +38,9 @@
 		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
 		"@atlaskit/editor-plugin-width": "^1.3.0",
 		"@atlaskit/editor-prosemirror": "6.2.1",
-		"@atlaskit/icon": "^22.28.0",
+		"@atlaskit/icon": "^23.0.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/tmp-editor-statsig": "^2.21.0",
+		"@atlaskit/tmp-editor-statsig": "^2.22.0",
 		"@atlaskit/tokens": "^2.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
@@ -94,15 +94,9 @@
 		}
 	},
 	"platform-feature-flags": {
-		"platform_editor_advanced_layouts_pre_release_2": {
-			"type": "boolean"
-		},
 		"platform_editor_remove_copy_button_from_view_mode": {
 			"type": "boolean"
 		},
-		"platform_editor_advanced_layouts_breakout_resizing": {
-			"type": "boolean"
-		},
 		"platform-visual-refresh-icons": {
 			"type": "boolean"
 		}

package/dist/cjs/pm-plugins/utils/preRelease.js

@@ -1,11 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isPreRelease2 = void 0;
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
-var isPreRelease2 = exports.isPreRelease2 = function isPreRelease2() {
-  return (0, _experiments.editorExperiment)('advanced_layouts', true) || (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_pre_release_2');
-};

package/dist/es2019/pm-plugins/utils/preRelease.js

@@ -1,3 +0,0 @@
-import { fg } from '@atlaskit/platform-feature-flags';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-export const isPreRelease2 = () => editorExperiment('advanced_layouts', true) || fg('platform_editor_advanced_layouts_pre_release_2');

package/dist/esm/pm-plugins/utils/preRelease.js

@@ -1,5 +0,0 @@
-import { fg } from '@atlaskit/platform-feature-flags';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-export var isPreRelease2 = function isPreRelease2() {
-  return editorExperiment('advanced_layouts', true) || fg('platform_editor_advanced_layouts_pre_release_2');
-};

package/dist/types/pm-plugins/utils/preRelease.d.ts

@@ -1 +0,0 @@
-export declare const isPreRelease2: () => boolean;

package/dist/types-ts4.5/pm-plugins/utils/preRelease.d.ts

@@ -1 +0,0 @@
-export declare const isPreRelease2: () => boolean;