@atlaskit/editor-plugin-layout 2.4.4 → 2.5.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-layout
 
+## 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
+
+- [#137973](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/137973)
+  [`5cc195689bfb2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5cc195689bfb2) -
+  ED-27400 add resize layout to single column layout
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.4.4
 
 ### Patch Changes

package/dist/cjs/layoutPlugin.js

@@ -63,8 +63,10 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
           pos = _ref3.pos,
           allowBreakout = _ref3.allowBreakout,
           addSidebarLayouts = _ref3.addSidebarLayouts,
-          allowSingleColumnLayout = _ref3.allowSingleColumnLayout;
-        if (pos !== null) {
+          allowSingleColumnLayout = _ref3.allowSingleColumnLayout,
+          isResizing = _ref3.isResizing;
+        var shouldHideToolbar = isResizing && (0, _experiments.editorExperiment)('single_column_layouts', true);
+        if (pos !== null && !shouldHideToolbar) {
           return (0, _toolbar.buildToolbar)(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout, allowAdvancedSingleColumnLayout, api);
         }
         return undefined;

package/dist/cjs/nodeviews/index.js

@@ -17,6 +17,7 @@ var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/rea
 var _resizer = require("@atlaskit/editor-common/resizer");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _utils = require("../pm-plugins/utils");
 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; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
@@ -68,6 +69,17 @@ var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
       guidelines: guidelines
     });
   }, [pluginInjectionApi, view]);
+
+  // we want to hide the floating toolbar for other nodes.
+  // e.g. info panel inside the current layout section
+  var selectIntoCurrentLayout = (0, _react.useCallback)(function () {
+    var pos = getPos();
+    if (pos === undefined) {
+      return;
+    }
+    // put the selection into the first column of the layout
+    (0, _utils.selectIntoLayout)(view, pos, 0);
+  }, [getPos, view]);
   return /*#__PURE__*/_react.default.createElement(_resizer.BreakoutResizer, {
     getRef: forwardRef,
     getPos: getPos,
@@ -78,7 +90,10 @@ var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
     parentRef: parentRef,
     editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions,
     displayGuidelines: (0, _experiments.editorExperiment)('single_column_layouts', true) ? displayGuidelines : undefined,
-    displayGapCursor: displayGapCursor
+    displayGapCursor: displayGapCursor,
+    onResizeStart: function onResizeStart() {
+      selectIntoCurrentLayout();
+    }
   });
 };
 var toDOM = function toDOM() {

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

@@ -68,7 +68,8 @@ var getInitialPluginState = function getInitialPluginState(options, state) {
     allowBreakout: allowBreakout,
     addSidebarLayouts: addSidebarLayouts,
     selectedLayout: selectedLayout,
-    allowSingleColumnLayout: allowSingleColumnLayout
+    allowSingleColumnLayout: allowSingleColumnLayout,
+    isResizing: false
   };
 };
 
@@ -79,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);
@@ -103,11 +104,14 @@ var _default = exports.default = function _default(options) {
       init: function init(_, state) {
         return getInitialPluginState(options, state);
       },
-      apply: function apply(tr, pluginState, _oldState, newState) {
+      apply: function apply(tr, pluginState, oldState, newState) {
+        var _tr$getMeta, _pluginKey$getState;
+        var isResizing = (0, _experiments.editorExperiment)('single_column_layouts', true) ? (_tr$getMeta = tr.getMeta('is-resizer-resizing')) !== null && _tr$getMeta !== void 0 ? _tr$getMeta : (_pluginKey$getState = _pluginKey.pluginKey.getState(oldState)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.isResizing : false;
         if (tr.docChanged || tr.selectionSet) {
           var maybeLayoutSection = (0, _utils3.getMaybeLayoutSection)(newState);
           var newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
             pos: maybeLayoutSection ? maybeLayoutSection.pos : null,
+            isResizing: isResizing,
             selectedLayout: (0, _actions.getSelectedLayout)(maybeLayoutSection && maybeLayoutSection.node,
             // Ignored via go/ees005
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -115,7 +119,9 @@ var _default = exports.default = function _default(options) {
           });
           return newPluginState;
         }
-        return pluginState;
+        return _objectSpread(_objectSpread({}, pluginState), {}, {
+          isResizing: isResizing
+        });
       }
     },
     props: {
@@ -166,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

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getMaybeLayoutSection = void 0;
+exports.selectIntoLayout = exports.getMaybeLayoutSection = void 0;
+var _selection = require("@atlaskit/editor-common/selection");
+var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var getMaybeLayoutSection = exports.getMaybeLayoutSection = function getMaybeLayoutSection(state) {
@@ -15,4 +17,42 @@ var getMaybeLayoutSection = exports.getMaybeLayoutSection = function getMaybeLay
 
   // When selection is on layoutColumn, we want to hide floating toolbar, hence don't return layoutSection node here
   return isLayoutColumn ? undefined : (0, _utils.findParentNodeOfType)(layoutSection)(selection) || (0, _utils.findSelectedNodeOfType)([layoutSection])(selection);
+};
+
+/**
+ * The depth of the layout column inside the layout section.
+ * As per the current implementation, the layout column ALWAYS has a depth of 1.
+ */
+var LAYOUT_COLUMN_DEPTH = 1;
+
+/**
+ * This helper function is used to select a position inside a layout section.
+ * @param view editor view instance
+ * @param posOfLayout the starting position of the layout
+ * @param childIndex the index of the child node in the layout section
+ * @returns Transaction or undefined
+ */
+var selectIntoLayout = exports.selectIntoLayout = function selectIntoLayout(view, posOfLayout) {
+  var _$maybeLayoutSection$;
+  var childIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  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
+    if (childIndex < 0 || childIndex >= layoutSectionNode.childCount) {
+      return;
+    }
+    var childPos = $maybeLayoutSection.posAtIndex(childIndex, LAYOUT_COLUMN_DEPTH);
+    var tr = view.state.tr;
+    var $selectionPos = tr.doc.resolve(childPos);
+    if (((_layoutSectionNode$fi = layoutSectionNode.firstChild) === null || _layoutSectionNode$fi === void 0 ? void 0 : _layoutSectionNode$fi.type.name) === 'paragraph') {
+      view.dispatch(tr.setSelection(_state.TextSelection.near($selectionPos)));
+    } else {
+      view.dispatch(tr.setSelection(_selection.GapCursorSelection.near($selectionPos)));
+    }
+    return tr;
+  }
 };

package/dist/es2019/layoutPlugin.js

@@ -53,9 +53,11 @@ export const layoutPlugin = ({
           pos,
           allowBreakout,
           addSidebarLayouts,
-          allowSingleColumnLayout
+          allowSingleColumnLayout,
+          isResizing
         } = pluginKey.getState(state);
-        if (pos !== null) {
+        const shouldHideToolbar = isResizing && editorExperiment('single_column_layouts', true);
+        if (pos !== null && !shouldHideToolbar) {
           return buildToolbar(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout, allowAdvancedSingleColumnLayout, api);
         }
         return undefined;

package/dist/es2019/nodeviews/index.js

@@ -4,6 +4,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';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { selectIntoLayout } from '../pm-plugins/utils';
 const isEmptyParagraph = node => {
   return !!node && node.type.name === 'paragraph' && !node.childCount;
 };
@@ -53,6 +54,17 @@ const LayoutBreakoutResizer = ({
       guidelines
     });
   }, [pluginInjectionApi, view]);
+
+  // we want to hide the floating toolbar for other nodes.
+  // e.g. info panel inside the current layout section
+  const selectIntoCurrentLayout = useCallback(() => {
+    const pos = getPos();
+    if (pos === undefined) {
+      return;
+    }
+    // put the selection into the first column of the layout
+    selectIntoLayout(view, pos, 0);
+  }, [getPos, view]);
   return /*#__PURE__*/React.createElement(BreakoutResizer, {
     getRef: forwardRef,
     getPos: getPos,
@@ -63,7 +75,10 @@ const LayoutBreakoutResizer = ({
     parentRef: parentRef,
     editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions,
     displayGuidelines: editorExperiment('single_column_layouts', true) ? displayGuidelines : undefined,
-    displayGapCursor: displayGapCursor
+    displayGapCursor: displayGapCursor,
+    onResizeStart: () => {
+      selectIntoCurrentLayout();
+    }
   });
 };
 const toDOM = () => ['div', {

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

@@ -63,7 +63,8 @@ const getInitialPluginState = (options, state) => {
     allowBreakout,
     addSidebarLayouts,
     selectedLayout,
-    allowSingleColumnLayout
+    allowSingleColumnLayout,
+    isResizing: false
   };
 };
 
@@ -74,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);
@@ -95,12 +96,15 @@ export default (options => new SafePlugin({
   key: pluginKey,
   state: {
     init: (_, state) => getInitialPluginState(options, state),
-    apply: (tr, pluginState, _oldState, newState) => {
+    apply: (tr, pluginState, oldState, newState) => {
+      var _tr$getMeta, _pluginKey$getState;
+      const isResizing = editorExperiment('single_column_layouts', true) ? (_tr$getMeta = tr.getMeta('is-resizer-resizing')) !== null && _tr$getMeta !== void 0 ? _tr$getMeta : (_pluginKey$getState = pluginKey.getState(oldState)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.isResizing : false;
       if (tr.docChanged || tr.selectionSet) {
         const maybeLayoutSection = getMaybeLayoutSection(newState);
         const newPluginState = {
           ...pluginState,
           pos: maybeLayoutSection ? maybeLayoutSection.pos : null,
+          isResizing,
           selectedLayout: getSelectedLayout(maybeLayoutSection && maybeLayoutSection.node,
           // Ignored via go/ees005
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -108,7 +112,10 @@ export default (options => new SafePlugin({
         };
         return newPluginState;
       }
-      return pluginState;
+      return {
+        ...pluginState,
+        isResizing
+      };
     }
   },
   props: {
@@ -155,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

@@ -1,3 +1,5 @@
+import { GapCursorSelection } from '@atlaskit/editor-common/selection';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export const getMaybeLayoutSection = state => {
@@ -14,4 +16,41 @@ export const getMaybeLayoutSection = state => {
 
   // When selection is on layoutColumn, we want to hide floating toolbar, hence don't return layoutSection node here
   return isLayoutColumn ? undefined : findParentNodeOfType(layoutSection)(selection) || findSelectedNodeOfType([layoutSection])(selection);
+};
+
+/**
+ * The depth of the layout column inside the layout section.
+ * As per the current implementation, the layout column ALWAYS has a depth of 1.
+ */
+const LAYOUT_COLUMN_DEPTH = 1;
+
+/**
+ * This helper function is used to select a position inside a layout section.
+ * @param view editor view instance
+ * @param posOfLayout the starting position of the layout
+ * @param childIndex the index of the child node in the layout section
+ * @returns Transaction or undefined
+ */
+export const selectIntoLayout = (view, posOfLayout, childIndex = 0) => {
+  var _$maybeLayoutSection$;
+  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
+    if (childIndex < 0 || childIndex >= layoutSectionNode.childCount) {
+      return;
+    }
+    const childPos = $maybeLayoutSection.posAtIndex(childIndex, LAYOUT_COLUMN_DEPTH);
+    const tr = view.state.tr;
+    const $selectionPos = tr.doc.resolve(childPos);
+    if (((_layoutSectionNode$fi = layoutSectionNode.firstChild) === null || _layoutSectionNode$fi === void 0 ? void 0 : _layoutSectionNode$fi.type.name) === 'paragraph') {
+      view.dispatch(tr.setSelection(TextSelection.near($selectionPos)));
+    } else {
+      view.dispatch(tr.setSelection(GapCursorSelection.near($selectionPos)));
+    }
+    return tr;
+  }
 };

package/dist/esm/layoutPlugin.js

@@ -56,8 +56,10 @@ export var layoutPlugin = function layoutPlugin(_ref) {
           pos = _ref3.pos,
           allowBreakout = _ref3.allowBreakout,
           addSidebarLayouts = _ref3.addSidebarLayouts,
-          allowSingleColumnLayout = _ref3.allowSingleColumnLayout;
-        if (pos !== null) {
+          allowSingleColumnLayout = _ref3.allowSingleColumnLayout,
+          isResizing = _ref3.isResizing;
+        var shouldHideToolbar = isResizing && editorExperiment('single_column_layouts', true);
+        if (pos !== null && !shouldHideToolbar) {
           return buildToolbar(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout, allowAdvancedSingleColumnLayout, api);
         }
         return undefined;

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';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { selectIntoLayout } from '../pm-plugins/utils';
 var isEmptyParagraph = function isEmptyParagraph(node) {
   return !!node && node.type.name === 'paragraph' && !node.childCount;
 };
@@ -58,6 +59,17 @@ var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
       guidelines: guidelines
     });
   }, [pluginInjectionApi, view]);
+
+  // we want to hide the floating toolbar for other nodes.
+  // e.g. info panel inside the current layout section
+  var selectIntoCurrentLayout = useCallback(function () {
+    var pos = getPos();
+    if (pos === undefined) {
+      return;
+    }
+    // put the selection into the first column of the layout
+    selectIntoLayout(view, pos, 0);
+  }, [getPos, view]);
   return /*#__PURE__*/React.createElement(BreakoutResizer, {
     getRef: forwardRef,
     getPos: getPos,
@@ -68,7 +80,10 @@ var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
     parentRef: parentRef,
     editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions,
     displayGuidelines: editorExperiment('single_column_layouts', true) ? displayGuidelines : undefined,
-    displayGapCursor: displayGapCursor
+    displayGapCursor: displayGapCursor,
+    onResizeStart: function onResizeStart() {
+      selectIntoCurrentLayout();
+    }
   });
 };
 var toDOM = function toDOM() {

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

@@ -61,7 +61,8 @@ var getInitialPluginState = function getInitialPluginState(options, state) {
     allowBreakout: allowBreakout,
     addSidebarLayouts: addSidebarLayouts,
     selectedLayout: selectedLayout,
-    allowSingleColumnLayout: allowSingleColumnLayout
+    allowSingleColumnLayout: allowSingleColumnLayout,
+    isResizing: false
   };
 };
 
@@ -72,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);
@@ -96,11 +97,14 @@ export default (function (options) {
       init: function init(_, state) {
         return getInitialPluginState(options, state);
       },
-      apply: function apply(tr, pluginState, _oldState, newState) {
+      apply: function apply(tr, pluginState, oldState, newState) {
+        var _tr$getMeta, _pluginKey$getState;
+        var isResizing = editorExperiment('single_column_layouts', true) ? (_tr$getMeta = tr.getMeta('is-resizer-resizing')) !== null && _tr$getMeta !== void 0 ? _tr$getMeta : (_pluginKey$getState = pluginKey.getState(oldState)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.isResizing : false;
         if (tr.docChanged || tr.selectionSet) {
           var maybeLayoutSection = getMaybeLayoutSection(newState);
           var newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
             pos: maybeLayoutSection ? maybeLayoutSection.pos : null,
+            isResizing: isResizing,
             selectedLayout: getSelectedLayout(maybeLayoutSection && maybeLayoutSection.node,
             // Ignored via go/ees005
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -108,7 +112,9 @@ export default (function (options) {
           });
           return newPluginState;
         }
-        return pluginState;
+        return _objectSpread(_objectSpread({}, pluginState), {}, {
+          isResizing: isResizing
+        });
       }
     },
     props: {
@@ -159,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

@@ -1,3 +1,5 @@
+import { GapCursorSelection } from '@atlaskit/editor-common/selection';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export var getMaybeLayoutSection = function getMaybeLayoutSection(state) {
@@ -9,4 +11,42 @@ export var getMaybeLayoutSection = function getMaybeLayoutSection(state) {
 
   // When selection is on layoutColumn, we want to hide floating toolbar, hence don't return layoutSection node here
   return isLayoutColumn ? undefined : findParentNodeOfType(layoutSection)(selection) || findSelectedNodeOfType([layoutSection])(selection);
+};
+
+/**
+ * The depth of the layout column inside the layout section.
+ * As per the current implementation, the layout column ALWAYS has a depth of 1.
+ */
+var LAYOUT_COLUMN_DEPTH = 1;
+
+/**
+ * This helper function is used to select a position inside a layout section.
+ * @param view editor view instance
+ * @param posOfLayout the starting position of the layout
+ * @param childIndex the index of the child node in the layout section
+ * @returns Transaction or undefined
+ */
+export var selectIntoLayout = function selectIntoLayout(view, posOfLayout) {
+  var _$maybeLayoutSection$;
+  var childIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  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
+    if (childIndex < 0 || childIndex >= layoutSectionNode.childCount) {
+      return;
+    }
+    var childPos = $maybeLayoutSection.posAtIndex(childIndex, LAYOUT_COLUMN_DEPTH);
+    var tr = view.state.tr;
+    var $selectionPos = tr.doc.resolve(childPos);
+    if (((_layoutSectionNode$fi = layoutSectionNode.firstChild) === null || _layoutSectionNode$fi === void 0 ? void 0 : _layoutSectionNode$fi.type.name) === 'paragraph') {
+      view.dispatch(tr.setSelection(TextSelection.near($selectionPos)));
+    } else {
+      view.dispatch(tr.setSelection(GapCursorSelection.near($selectionPos)));
+    }
+    return tr;
+  }
 };

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

@@ -6,6 +6,7 @@ export type LayoutState = {
     addSidebarLayouts: boolean;
     selectedLayout: PresetLayout | undefined;
     allowSingleColumnLayout: boolean;
+    isResizing: boolean;
 };
 export type Change = {
     from: number;

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

@@ -1,3 +1,12 @@
-import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import { type EditorState } from '@atlaskit/editor-prosemirror/state';
 import { type ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+import { EditorView } from '@atlaskit/editor-prosemirror/view';
 export declare const getMaybeLayoutSection: (state: EditorState) => ContentNodeWithPos | undefined;
+/**
+ * This helper function is used to select a position inside a layout section.
+ * @param view editor view instance
+ * @param posOfLayout the starting position of the layout
+ * @param childIndex the index of the child node in the layout section
+ * @returns Transaction or undefined
+ */
+export declare const selectIntoLayout: (view: EditorView, posOfLayout: number, childIndex?: number) => import("prosemirror-state").Transaction | undefined;

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

@@ -6,6 +6,7 @@ export type LayoutState = {
     addSidebarLayouts: boolean;
     selectedLayout: PresetLayout | undefined;
     allowSingleColumnLayout: boolean;
+    isResizing: boolean;
 };
 export type Change = {
     from: number;

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

@@ -1,3 +1,12 @@
-import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import { type EditorState } from '@atlaskit/editor-prosemirror/state';
 import { type ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+import { EditorView } from '@atlaskit/editor-prosemirror/view';
 export declare const getMaybeLayoutSection: (state: EditorState) => ContentNodeWithPos | undefined;
+/**
+ * This helper function is used to select a position inside a layout section.
+ * @param view editor view instance
+ * @param posOfLayout the starting position of the layout
+ * @param childIndex the index of the child node in the layout section
+ * @returns Transaction or undefined
+ */
+export declare const selectIntoLayout: (view: EditorView, posOfLayout: number, childIndex?: number) => import("prosemirror-state").Transaction | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-layout",
-	"version": "2.4.4",
+	"version": "2.5.1",
 	"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.4.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",
@@ -43,10 +43,10 @@
 		"@atlaskit/editor-plugin-width": "^3.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
-		"@atlaskit/icon": "^25.5.0",
+		"@atlaskit/icon": "^25.6.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^4.6.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"
 	},