@atlaskit/editor-plugin-layout 2.4.3 → 2.5.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-layout
 
+## 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
+
+- [#139216](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/139216)
+  [`e8f596d2b1910`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e8f596d2b1910) -
+  [ux] Cleaned up platform_editor_controls_patch_1 FG
+- Updated dependencies
+
 ## 2.4.3
 
 ### 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
   };
 };
 
@@ -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: {

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/cjs/ui/toolbar.js

@@ -20,7 +20,6 @@ var _layoutThreeColumnsSidebarsEditorLayoutThreeWithSidebars = _interopRequireDe
 var _layoutTwoColumnsEditorLayoutTwoEqual = _interopRequireDefault(require("@atlaskit/icon/core/migration/layout-two-columns--editor-layout-two-equal"));
 var _layoutTwoColumnsSidebarLeftEditorLayoutTwoLeftSidebar = _interopRequireDefault(require("@atlaskit/icon/core/migration/layout-two-columns-sidebar-left--editor-layout-two-left-sidebar"));
 var _layoutTwoColumnsSidebarRightEditorLayoutTwoRightSidebar = _interopRequireDefault(require("@atlaskit/icon/core/migration/layout-two-columns-sidebar-right--editor-layout-two-right-sidebar"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _actions = require("../pm-plugins/actions");
 var _LayoutThreeWithLeftSidebars = require("./icons/LayoutThreeWithLeftSidebars");
@@ -228,12 +227,12 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos
     };
     var layoutTypes = allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
     var hoverDecorationProps = function hoverDecorationProps(nodeType, className) {
-      return (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') ? {
+      return {
         onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
         onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className),
         onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
         onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className)
-      } : undefined;
+      };
     };
     var overflowMenu = {
       type: 'overflow-dropdown',

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
   };
 };
 
@@ -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: {

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/es2019/ui/toolbar.js

@@ -10,7 +10,6 @@ import LayoutThreeColumnsSidebarsIcon from '@atlaskit/icon/core/migration/layout
 import LayoutTwoColumnsIcon from '@atlaskit/icon/core/migration/layout-two-columns--editor-layout-two-equal';
 import LayoutTwoColumnsSidebarLeftIcon from '@atlaskit/icon/core/migration/layout-two-columns-sidebar-left--editor-layout-two-left-sidebar';
 import LayoutTwoColumnsSidebarRightIcon from '@atlaskit/icon/core/migration/layout-two-columns-sidebar-right--editor-layout-two-right-sidebar';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { deleteActiveLayoutNode, getPresetLayout, setPresetLayout } from '../pm-plugins/actions';
 import { LayoutThreeWithLeftSidebarsIcon } from './icons/LayoutThreeWithLeftSidebars';
@@ -211,12 +210,12 @@ export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts
       }]
     };
     const layoutTypes = allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
-    const hoverDecorationProps = (nodeType, className) => fg('platform_editor_controls_patch_1') ? {
+    const hoverDecorationProps = (nodeType, className) => ({
       onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
       onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className),
       onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
       onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className)
-    } : undefined;
+    });
     const overflowMenu = {
       type: 'overflow-dropdown',
       options: [{

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
   };
 };
 
@@ -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: {

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/esm/ui/toolbar.js

@@ -14,7 +14,6 @@ import LayoutThreeColumnsSidebarsIcon from '@atlaskit/icon/core/migration/layout
 import LayoutTwoColumnsIcon from '@atlaskit/icon/core/migration/layout-two-columns--editor-layout-two-equal';
 import LayoutTwoColumnsSidebarLeftIcon from '@atlaskit/icon/core/migration/layout-two-columns-sidebar-left--editor-layout-two-left-sidebar';
 import LayoutTwoColumnsSidebarRightIcon from '@atlaskit/icon/core/migration/layout-two-columns-sidebar-right--editor-layout-two-right-sidebar';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { deleteActiveLayoutNode, getPresetLayout, setPresetLayout } from '../pm-plugins/actions';
 import { LayoutThreeWithLeftSidebarsIcon } from './icons/LayoutThreeWithLeftSidebars';
@@ -218,12 +217,12 @@ export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout
     };
     var layoutTypes = allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
     var hoverDecorationProps = function hoverDecorationProps(nodeType, className) {
-      return fg('platform_editor_controls_patch_1') ? {
+      return {
         onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
         onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className),
         onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
         onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className)
-      } : undefined;
+      };
     };
     var overflowMenu = {
       type: 'overflow-dropdown',

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.3",
+	"version": "2.5.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.0.0",
+		"@atlaskit/editor-common": "^103.7.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-decorations": "^2.0.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
@@ -43,9 +43,9 @@
 		"@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/tmp-editor-statsig": "^4.8.0",
 		"@atlaskit/tokens": "^4.7.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
@@ -101,9 +101,6 @@
 	"platform-feature-flags": {
 		"platform-visual-refresh-icons": {
 			"type": "boolean"
-		},
-		"platform_editor_controls_patch_1": {
-			"type": "boolean"
 		}
 	}
 }