@atlaskit/editor-plugin-layout 2.5.0 → 2.6.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-layout
 
+## 2.6.0
+
+### Minor Changes
+
+- [#144082](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/144082)
+  [`583a67e0b8ee7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/583a67e0b8ee7) -
+  ED-27146 improve layout insertion behaivour, now will select into the layout after insertion.
+
+## 2.5.1
+
+### Patch Changes
+
+- [#142936](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/142936)
+  [`9d1e16eaadf95`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9d1e16eaadf95) -
+  ED-26662: Delete layout column can create a single column layout
+- Updated dependencies
+
 ## 2.5.0
 
 ### Minor Changes

package/dist/cjs/layoutPlugin.js

@@ -4,13 +4,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.layoutPlugin = void 0;
+exports.selectIntoLayoutSection = exports.layoutPlugin = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _schema = require("@atlaskit/adf-schema/schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _actions = require("./pm-plugins/actions");
 var _main = _interopRequireDefault(require("./pm-plugins/main"));
@@ -18,6 +20,33 @@ var _pluginKey = require("./pm-plugins/plugin-key");
 var _resizing = _interopRequireDefault(require("./pm-plugins/resizing"));
 var _globalStyles = require("./ui/global-styles");
 var _toolbar = require("./ui/toolbar");
+/**
+ * This function is used to set the selection into
+ * the first paragraph of the first column of a layout section.
+ * This function is only intended to be used after inserting a new layout section.
+ * @param tr - transaction
+ * @returns - transaction with the selection set to the first paragraph of the first column
+ */
+var selectIntoLayoutSection = exports.selectIntoLayoutSection = function selectIntoLayoutSection(tr) {
+  var _nodeWithPos$node$fir;
+  if (!(0, _experiments.editorExperiment)('single_column_layouts', true)) {
+    return tr;
+  }
+  var _tr$doc$type$schema$n = tr.doc.type.schema.nodes,
+    layoutSection = _tr$doc$type$schema$n.layoutSection,
+    paragraph = _tr$doc$type$schema$n.paragraph;
+  var nodeWithPos = (0, _utils.findParentNode)(function (node) {
+    return node.type === layoutSection;
+  })(tr.selection);
+  if (!nodeWithPos || !nodeWithPos.node || nodeWithPos.node.type.name !== 'layoutSection' || ((_nodeWithPos$node$fir = nodeWithPos.node.firstChild) === null || _nodeWithPos$node$fir === void 0 || (_nodeWithPos$node$fir = _nodeWithPos$node$fir.firstChild) === null || _nodeWithPos$node$fir === void 0 ? void 0 : _nodeWithPos$node$fir.type) !== paragraph) {
+    return tr;
+  }
+
+  // set text selection at the beginning of the layout section
+  // will set the selection to the first column
+  tr.setSelection(_state.TextSelection.create(tr.doc, nodeWithPos.pos));
+  return tr;
+};
 var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
   var _api$analytics;
   var _ref$config = _ref.config,
@@ -98,6 +127,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
           action: function action(insert, state, _source) {
             var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 1));
             withInsertLayoutAnalytics(tr);
+            selectIntoLayoutSection(tr);
             return tr;
           }
         }] : [];
@@ -117,6 +147,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
               action: function action(insert, state) {
                 var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 3));
                 withInsertLayoutAnalytics(tr);
+                selectIntoLayoutSection(tr);
                 return tr;
               }
             }];
@@ -135,6 +166,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
               action: function action(insert, state) {
                 var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 2));
                 withInsertLayoutAnalytics(tr);
+                selectIntoLayoutSection(tr);
                 return tr;
               }
             }, {
@@ -151,6 +183,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
               action: function action(insert, state) {
                 var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 3));
                 withInsertLayoutAnalytics(tr);
+                selectIntoLayoutSection(tr);
                 return tr;
               }
             }, {
@@ -167,6 +200,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
               action: function action(insert, state) {
                 var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 4));
                 withInsertLayoutAnalytics(tr);
+                selectIntoLayoutSection(tr);
                 return tr;
               }
             }, {
@@ -183,6 +217,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
               action: function action(insert, state) {
                 var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 5));
                 withInsertLayoutAnalytics(tr);
+                selectIntoLayoutSection(tr);
                 return tr;
               }
             }]);

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

@@ -80,7 +80,7 @@ var getInitialPluginState = function getInitialPluginState(options, state) {
 // 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)) {
+  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) && !(0, _experiments.editorExperiment)('single_column_layouts', true)) {
     var _sel$$from$parent$las, _sel$$from$parent$fir;
     var tr = state.tr;
     var layoutContentFragment = sel.$from.parentOffset === 0 ? _model.Fragment.from((_sel$$from$parent$las = sel.$from.parent.lastChild) === null || _sel$$from$parent$las === void 0 ? void 0 : _sel$$from$parent$las.content) : _model.Fragment.from((_sel$$from$parent$fir = sel.$from.parent.firstChild) === null || _sel$$from$parent$fir === void 0 ? void 0 : _sel$$from$parent$fir.content);
@@ -172,12 +172,10 @@ var _default = exports.default = function _default(options) {
       if ((0, _experiments.editorExperiment)('advanced_layouts', true) && changes.length === 1) {
         var _change$slice$content, _change$slice$content2;
         var change = changes[0];
-        // when need to update a layoutColumn with width 100
-        // meaning a single column layout has been create,
-        // We replace the layout with its content
-        // This is to prevent a single column layout from being created
-        // when a user deletes a layoutColumn
-        if (change.slice.content.childCount === 1 && ((_change$slice$content = change.slice.content.firstChild) === null || _change$slice$content === void 0 ? void 0 : _change$slice$content.type.name) === 'layoutColumn' && ((_change$slice$content2 = change.slice.content.firstChild) === null || _change$slice$content2 === void 0 ? void 0 : _change$slice$content2.attrs.width) === _consts.EVEN_DISTRIBUTED_COL_WIDTHS[1]) {
+        // When editorExperiment('single_column_layouts', true) is on
+        // delete can create a single column layout
+        // otherwise we replace the single column layout with its content
+        if (!(0, _experiments.editorExperiment)('single_column_layouts', true) && change.slice.content.childCount === 1 && ((_change$slice$content = change.slice.content.firstChild) === null || _change$slice$content === void 0 ? void 0 : _change$slice$content.type.name) === 'layoutColumn' && ((_change$slice$content2 = change.slice.content.firstChild) === null || _change$slice$content2 === void 0 ? void 0 : _change$slice$content2.attrs.width) === _consts.EVEN_DISTRIBUTED_COL_WIDTHS[1]) {
           var tr = newState.tr;
           var content = change.slice.content.firstChild.content;
           tr.replaceWith(change.from - 1, change.to, content);

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

@@ -38,7 +38,6 @@ var selectIntoLayout = exports.selectIntoLayout = function selectIntoLayout(view
   var $maybeLayoutSection = view.state.doc.resolve(posOfLayout);
   if (((_$maybeLayoutSection$ = $maybeLayoutSection.nodeAfter) === null || _$maybeLayoutSection$ === void 0 ? void 0 : _$maybeLayoutSection$.type.name) === 'layoutSection') {
     var _layoutSectionNode$fi;
-    // $maybeLayoutSection.posAtIndex(1, 1);
     var layoutSectionNode = $maybeLayoutSection.nodeAfter;
 
     // check if the childIndex is valid

package/dist/es2019/layoutPlugin.js

@@ -4,6 +4,8 @@ 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, IconOneColumnLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/quick-insert';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayoutColumnsWithAnalytics } from './pm-plugins/actions';
 import { default as createLayoutPlugin } from './pm-plugins/main';
@@ -11,6 +13,33 @@ import { pluginKey } from './pm-plugins/plugin-key';
 import { default as createLayoutResizingPlugin } from './pm-plugins/resizing';
 import { GlobalStylesWrapper } from './ui/global-styles';
 import { buildToolbar } from './ui/toolbar';
+
+/**
+ * This function is used to set the selection into
+ * the first paragraph of the first column of a layout section.
+ * This function is only intended to be used after inserting a new layout section.
+ * @param tr - transaction
+ * @returns - transaction with the selection set to the first paragraph of the first column
+ */
+export const selectIntoLayoutSection = tr => {
+  var _nodeWithPos$node$fir, _nodeWithPos$node$fir2;
+  if (!editorExperiment('single_column_layouts', true)) {
+    return tr;
+  }
+  const {
+    layoutSection,
+    paragraph
+  } = tr.doc.type.schema.nodes;
+  const nodeWithPos = findParentNode(node => node.type === layoutSection)(tr.selection);
+  if (!nodeWithPos || !nodeWithPos.node || nodeWithPos.node.type.name !== 'layoutSection' || ((_nodeWithPos$node$fir = nodeWithPos.node.firstChild) === null || _nodeWithPos$node$fir === void 0 ? void 0 : (_nodeWithPos$node$fir2 = _nodeWithPos$node$fir.firstChild) === null || _nodeWithPos$node$fir2 === void 0 ? void 0 : _nodeWithPos$node$fir2.type) !== paragraph) {
+    return tr;
+  }
+
+  // set text selection at the beginning of the layout section
+  // will set the selection to the first column
+  tr.setSelection(TextSelection.create(tr.doc, nodeWithPos.pos));
+  return tr;
+};
 export const layoutPlugin = ({
   config: options = {},
   api
@@ -88,6 +117,7 @@ export const layoutPlugin = ({
           action(insert, state, _source) {
             const tr = insert(createMultiColumnLayoutSection(state, 1));
             withInsertLayoutAnalytics(tr);
+            selectIntoLayoutSection(tr);
             return tr;
           }
         }] : [];
@@ -105,6 +135,7 @@ export const layoutPlugin = ({
               action(insert, state) {
                 const tr = insert(createMultiColumnLayoutSection(state, 3));
                 withInsertLayoutAnalytics(tr);
+                selectIntoLayoutSection(tr);
                 return tr;
               }
             }];
@@ -121,6 +152,7 @@ export const layoutPlugin = ({
               action(insert, state) {
                 const tr = insert(createMultiColumnLayoutSection(state, 2));
                 withInsertLayoutAnalytics(tr);
+                selectIntoLayoutSection(tr);
                 return tr;
               }
             }, {
@@ -135,6 +167,7 @@ export const layoutPlugin = ({
               action(insert, state) {
                 const tr = insert(createMultiColumnLayoutSection(state, 3));
                 withInsertLayoutAnalytics(tr);
+                selectIntoLayoutSection(tr);
                 return tr;
               }
             }, {
@@ -149,6 +182,7 @@ export const layoutPlugin = ({
               action(insert, state) {
                 const tr = insert(createMultiColumnLayoutSection(state, 4));
                 withInsertLayoutAnalytics(tr);
+                selectIntoLayoutSection(tr);
                 return tr;
               }
             }, {
@@ -163,6 +197,7 @@ export const layoutPlugin = ({
               action(insert, state) {
                 const tr = insert(createMultiColumnLayoutSection(state, 5));
                 withInsertLayoutAnalytics(tr);
+                selectIntoLayoutSection(tr);
                 return tr;
               }
             }];

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

@@ -75,7 +75,7 @@ const getInitialPluginState = (options, state) => {
 // 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)) {
+  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) && !editorExperiment('single_column_layouts', true)) {
     var _sel$$from$parent$las, _sel$$from$parent$fir;
     const tr = state.tr;
     const layoutContentFragment = sel.$from.parentOffset === 0 ? Fragment.from((_sel$$from$parent$las = sel.$from.parent.lastChild) === null || _sel$$from$parent$las === void 0 ? void 0 : _sel$$from$parent$las.content) : Fragment.from((_sel$$from$parent$fir = sel.$from.parent.firstChild) === null || _sel$$from$parent$fir === void 0 ? void 0 : _sel$$from$parent$fir.content);
@@ -162,12 +162,10 @@ export default (options => new SafePlugin({
     if (editorExperiment('advanced_layouts', true) && changes.length === 1) {
       var _change$slice$content, _change$slice$content2;
       const change = changes[0];
-      // when need to update a layoutColumn with width 100
-      // meaning a single column layout has been create,
-      // We replace the layout with its content
-      // This is to prevent a single column layout from being created
-      // when a user deletes a layoutColumn
-      if (change.slice.content.childCount === 1 && ((_change$slice$content = change.slice.content.firstChild) === null || _change$slice$content === void 0 ? void 0 : _change$slice$content.type.name) === 'layoutColumn' && ((_change$slice$content2 = change.slice.content.firstChild) === null || _change$slice$content2 === void 0 ? void 0 : _change$slice$content2.attrs.width) === EVEN_DISTRIBUTED_COL_WIDTHS[1]) {
+      // When editorExperiment('single_column_layouts', true) is on
+      // delete can create a single column layout
+      // otherwise we replace the single column layout with its content
+      if (!editorExperiment('single_column_layouts', true) && change.slice.content.childCount === 1 && ((_change$slice$content = change.slice.content.firstChild) === null || _change$slice$content === void 0 ? void 0 : _change$slice$content.type.name) === 'layoutColumn' && ((_change$slice$content2 = change.slice.content.firstChild) === null || _change$slice$content2 === void 0 ? void 0 : _change$slice$content2.attrs.width) === EVEN_DISTRIBUTED_COL_WIDTHS[1]) {
         const tr = newState.tr;
         const {
           content

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

@@ -36,7 +36,6 @@ export const selectIntoLayout = (view, posOfLayout, childIndex = 0) => {
   const $maybeLayoutSection = view.state.doc.resolve(posOfLayout);
   if (((_$maybeLayoutSection$ = $maybeLayoutSection.nodeAfter) === null || _$maybeLayoutSection$ === void 0 ? void 0 : _$maybeLayoutSection$.type.name) === 'layoutSection') {
     var _layoutSectionNode$fi;
-    // $maybeLayoutSection.posAtIndex(1, 1);
     const layoutSectionNode = $maybeLayoutSection.nodeAfter;
 
     // check if the childIndex is valid

package/dist/esm/layoutPlugin.js

@@ -4,6 +4,8 @@ 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, IconOneColumnLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/quick-insert';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayoutColumnsWithAnalytics } from './pm-plugins/actions';
 import { default as createLayoutPlugin } from './pm-plugins/main';
@@ -11,6 +13,34 @@ import { pluginKey } from './pm-plugins/plugin-key';
 import { default as createLayoutResizingPlugin } from './pm-plugins/resizing';
 import { GlobalStylesWrapper } from './ui/global-styles';
 import { buildToolbar } from './ui/toolbar';
+
+/**
+ * This function is used to set the selection into
+ * the first paragraph of the first column of a layout section.
+ * This function is only intended to be used after inserting a new layout section.
+ * @param tr - transaction
+ * @returns - transaction with the selection set to the first paragraph of the first column
+ */
+export var selectIntoLayoutSection = function selectIntoLayoutSection(tr) {
+  var _nodeWithPos$node$fir;
+  if (!editorExperiment('single_column_layouts', true)) {
+    return tr;
+  }
+  var _tr$doc$type$schema$n = tr.doc.type.schema.nodes,
+    layoutSection = _tr$doc$type$schema$n.layoutSection,
+    paragraph = _tr$doc$type$schema$n.paragraph;
+  var nodeWithPos = findParentNode(function (node) {
+    return node.type === layoutSection;
+  })(tr.selection);
+  if (!nodeWithPos || !nodeWithPos.node || nodeWithPos.node.type.name !== 'layoutSection' || ((_nodeWithPos$node$fir = nodeWithPos.node.firstChild) === null || _nodeWithPos$node$fir === void 0 || (_nodeWithPos$node$fir = _nodeWithPos$node$fir.firstChild) === null || _nodeWithPos$node$fir === void 0 ? void 0 : _nodeWithPos$node$fir.type) !== paragraph) {
+    return tr;
+  }
+
+  // set text selection at the beginning of the layout section
+  // will set the selection to the first column
+  tr.setSelection(TextSelection.create(tr.doc, nodeWithPos.pos));
+  return tr;
+};
 export var layoutPlugin = function layoutPlugin(_ref) {
   var _api$analytics;
   var _ref$config = _ref.config,
@@ -91,6 +121,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
           action: function action(insert, state, _source) {
             var tr = insert(createMultiColumnLayoutSection(state, 1));
             withInsertLayoutAnalytics(tr);
+            selectIntoLayoutSection(tr);
             return tr;
           }
         }] : [];
@@ -110,6 +141,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
               action: function action(insert, state) {
                 var tr = insert(createMultiColumnLayoutSection(state, 3));
                 withInsertLayoutAnalytics(tr);
+                selectIntoLayoutSection(tr);
                 return tr;
               }
             }];
@@ -128,6 +160,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
               action: function action(insert, state) {
                 var tr = insert(createMultiColumnLayoutSection(state, 2));
                 withInsertLayoutAnalytics(tr);
+                selectIntoLayoutSection(tr);
                 return tr;
               }
             }, {
@@ -144,6 +177,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
               action: function action(insert, state) {
                 var tr = insert(createMultiColumnLayoutSection(state, 3));
                 withInsertLayoutAnalytics(tr);
+                selectIntoLayoutSection(tr);
                 return tr;
               }
             }, {
@@ -160,6 +194,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
               action: function action(insert, state) {
                 var tr = insert(createMultiColumnLayoutSection(state, 4));
                 withInsertLayoutAnalytics(tr);
+                selectIntoLayoutSection(tr);
                 return tr;
               }
             }, {
@@ -176,6 +211,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
               action: function action(insert, state) {
                 var tr = insert(createMultiColumnLayoutSection(state, 5));
                 withInsertLayoutAnalytics(tr);
+                selectIntoLayoutSection(tr);
                 return tr;
               }
             }]);

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

@@ -73,7 +73,7 @@ var getInitialPluginState = function getInitialPluginState(options, state) {
 // 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)) {
+  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) && !editorExperiment('single_column_layouts', true)) {
     var _sel$$from$parent$las, _sel$$from$parent$fir;
     var tr = state.tr;
     var layoutContentFragment = sel.$from.parentOffset === 0 ? Fragment.from((_sel$$from$parent$las = sel.$from.parent.lastChild) === null || _sel$$from$parent$las === void 0 ? void 0 : _sel$$from$parent$las.content) : Fragment.from((_sel$$from$parent$fir = sel.$from.parent.firstChild) === null || _sel$$from$parent$fir === void 0 ? void 0 : _sel$$from$parent$fir.content);
@@ -165,12 +165,10 @@ export default (function (options) {
       if (editorExperiment('advanced_layouts', true) && changes.length === 1) {
         var _change$slice$content, _change$slice$content2;
         var change = changes[0];
-        // when need to update a layoutColumn with width 100
-        // meaning a single column layout has been create,
-        // We replace the layout with its content
-        // This is to prevent a single column layout from being created
-        // when a user deletes a layoutColumn
-        if (change.slice.content.childCount === 1 && ((_change$slice$content = change.slice.content.firstChild) === null || _change$slice$content === void 0 ? void 0 : _change$slice$content.type.name) === 'layoutColumn' && ((_change$slice$content2 = change.slice.content.firstChild) === null || _change$slice$content2 === void 0 ? void 0 : _change$slice$content2.attrs.width) === EVEN_DISTRIBUTED_COL_WIDTHS[1]) {
+        // When editorExperiment('single_column_layouts', true) is on
+        // delete can create a single column layout
+        // otherwise we replace the single column layout with its content
+        if (!editorExperiment('single_column_layouts', true) && change.slice.content.childCount === 1 && ((_change$slice$content = change.slice.content.firstChild) === null || _change$slice$content === void 0 ? void 0 : _change$slice$content.type.name) === 'layoutColumn' && ((_change$slice$content2 = change.slice.content.firstChild) === null || _change$slice$content2 === void 0 ? void 0 : _change$slice$content2.attrs.width) === EVEN_DISTRIBUTED_COL_WIDTHS[1]) {
           var tr = newState.tr;
           var content = change.slice.content.firstChild.content;
           tr.replaceWith(change.from - 1, change.to, content);

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

@@ -32,7 +32,6 @@ export var selectIntoLayout = function selectIntoLayout(view, posOfLayout) {
   var $maybeLayoutSection = view.state.doc.resolve(posOfLayout);
   if (((_$maybeLayoutSection$ = $maybeLayoutSection.nodeAfter) === null || _$maybeLayoutSection$ === void 0 ? void 0 : _$maybeLayoutSection$.type.name) === 'layoutSection') {
     var _layoutSectionNode$fi;
-    // $maybeLayoutSection.posAtIndex(1, 1);
     var layoutSectionNode = $maybeLayoutSection.nodeAfter;
 
     // check if the childIndex is valid

package/dist/types/layoutPlugin.d.ts

@@ -1,2 +1,11 @@
+import { type Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { LayoutPlugin } from './layoutPluginType';
+/**
+ * This function is used to set the selection into
+ * the first paragraph of the first column of a layout section.
+ * This function is only intended to be used after inserting a new layout section.
+ * @param tr - transaction
+ * @returns - transaction with the selection set to the first paragraph of the first column
+ */
+export declare const selectIntoLayoutSection: (tr: Transaction) => Transaction;
 export declare const layoutPlugin: LayoutPlugin;

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

@@ -1,2 +1,11 @@
+import { type Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { LayoutPlugin } from './layoutPluginType';
+/**
+ * This function is used to set the selection into
+ * the first paragraph of the first column of a layout section.
+ * This function is only intended to be used after inserting a new layout section.
+ * @param tr - transaction
+ * @returns - transaction with the selection set to the first paragraph of the first column
+ */
+export declare const selectIntoLayoutSection: (tr: Transaction) => Transaction;
 export declare const layoutPlugin: LayoutPlugin;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-layout",
-	"version": "2.5.0",
+	"version": "2.6.0",
 	"description": "Layout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,7 +34,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^103.7.0",
+		"@atlaskit/editor-common": "^103.12.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-decorations": "^2.0.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
@@ -45,8 +45,8 @@
 		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/icon": "^25.6.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^4.8.0",
-		"@atlaskit/tokens": "^4.7.0",
+		"@atlaskit/tmp-editor-statsig": "^4.12.0",
+		"@atlaskit/tokens": "^4.8.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},