@atlaskit/editor-plugin-layout 1.9.9 → 1.10.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-layout
 
+## 1.10.0
+
+### Minor Changes
+
+- [#159777](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/159777)
+  [`64dae465493a4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/64dae465493a4) -
+  Add Breakout Resizing component to editor-common, add support in Layout plugin
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.9.10
+
+### Patch Changes
+
+- [#159826](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/159826)
+  [`f60aee4fc057e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f60aee4fc057e) -
+  [ux] Show toolbar distribution options based on layout columnsnumber
+- Updated dependencies
+
 ## 1.9.9
 
 ### Patch Changes

package/dist/cjs/node-views/index.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LayoutSectionView = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _react = _interopRequireDefault(require("react"));
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
+var _resizer = require("@atlaskit/editor-common/resizer");
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
+  var pluginInjectionApi = _ref.pluginInjectionApi,
+    forwardRef = _ref.forwardRef,
+    getPos = _ref.getPos,
+    view = _ref.view;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['editorDisabled']),
+    editorDisabledState = _useSharedPluginState.editorDisabledState;
+  var getEditorWidth = function getEditorWidth() {
+    var _pluginInjectionApi$w;
+    return pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.currentState();
+  };
+  return /*#__PURE__*/_react.default.createElement(_resizer.BreakoutResizer, {
+    getRef: forwardRef,
+    getPos: getPos,
+    editorView: view,
+    node: "layoutSection",
+    getEditorWidth: getEditorWidth,
+    disabled: (editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled) === true
+  });
+};
+var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
+  (0, _inherits2.default)(LayoutSectionView, _ReactNodeView);
+  var _super = _createSuper(LayoutSectionView);
+  function LayoutSectionView(props) {
+    var _this;
+    (0, _classCallCheck2.default)(this, LayoutSectionView);
+    _this = _super.call(this, props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
+    _this.options = props.options;
+    return _this;
+  }
+  (0, _createClass2.default)(LayoutSectionView, [{
+    key: "getContentDOM",
+    value: function getContentDOM() {
+      var dom = document.createElement('div');
+      dom.setAttribute('data-layout-section', 'true');
+      this.layoutDOM = dom;
+      this.layoutDOM.setAttribute('data-column-rule-style', this.node.attrs.columnRuleStyle);
+      return {
+        dom: dom
+      };
+    }
+  }, {
+    key: "setDomAttrs",
+    value: function setDomAttrs(node, element) {
+      if (this.layoutDOM) {
+        this.layoutDOM.setAttribute('data-column-rule-style', node.attrs.columnRuleStyle);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render(props, forwardRef) {
+      return /*#__PURE__*/_react.default.createElement(LayoutBreakoutResizer, {
+        pluginInjectionApi: props.pluginInjectionApi,
+        forwardRef: forwardRef,
+        getPos: props.getPos,
+        view: props.view
+      });
+    }
+  }, {
+    key: "ignoreMutation",
+    value: function ignoreMutation(mutation) {
+      return (0, _resizer.ignoreResizerMutations)(mutation);
+    }
+  }]);
+  return LayoutSectionView;
+}(_reactNodeView.default);

package/dist/cjs/plugin.js

@@ -17,9 +17,11 @@ var _schema = require("@atlaskit/adf-schema/schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _actions = require("./actions");
 var _main = _interopRequireDefault(require("./pm-plugins/main"));
 var _pluginKey = require("./pm-plugins/plugin-key");
+var _resizing = _interopRequireDefault(require("./pm-plugins/resizing"));
 var _toolbar = require("./toolbar");
 var _globalStyles = require("./ui/global-styles");
 var _preRelease = require("./utils/preRelease");
@@ -40,30 +42,41 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
       }];
     },
     pmPlugins: function pmPlugins() {
-      return [{
+      var plugins = [{
         name: 'layout',
         plugin: function plugin() {
           return (0, _main.default)(options);
         }
       }];
+      if ((options.editorAppearance === 'full-page' || options.editorAppearance === 'full-width') && api && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_breakout_resizing')) {
+        plugins.push({
+          name: 'layoutResizing',
+          plugin: function plugin(_ref2) {
+            var portalProviderAPI = _ref2.portalProviderAPI,
+              eventDispatcher = _ref2.eventDispatcher;
+            return (0, _resizing.default)(options, api, portalProviderAPI, eventDispatcher);
+          }
+        });
+      }
+      return plugins;
     },
     actions: {
       insertLayoutColumns: (0, _actions.insertLayoutColumnsWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)
     },
     pluginsOptions: {
       floatingToolbar: function floatingToolbar(state, intl) {
-        var _ref2 = _pluginKey.pluginKey.getState(state),
-          pos = _ref2.pos,
-          allowBreakout = _ref2.allowBreakout,
-          addSidebarLayouts = _ref2.addSidebarLayouts,
-          allowSingleColumnLayout = _ref2.allowSingleColumnLayout;
+        var _ref3 = _pluginKey.pluginKey.getState(state),
+          pos = _ref3.pos,
+          allowBreakout = _ref3.allowBreakout,
+          addSidebarLayouts = _ref3.addSidebarLayouts,
+          allowSingleColumnLayout = _ref3.allowSingleColumnLayout;
         if (pos !== null) {
           return (0, _toolbar.buildToolbar)(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api);
         }
         return undefined;
       },
-      quickInsert: function quickInsert(_ref3) {
-        var formatMessage = _ref3.formatMessage;
+      quickInsert: function quickInsert(_ref4) {
+        var formatMessage = _ref4.formatMessage;
         return (0, _preRelease.isPreRelease2)() ? [{
           id: 'twocolumnslayout',
           title: formatMessage(_messages.layoutMessages.twoColumns),

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

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pluginKey = exports.default = void 0;
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _nodeViews = require("../node-views");
+var pluginKey = exports.pluginKey = new _state.PluginKey('layoutResizingPlugin');
+var _default = exports.default = function _default(options, pluginInjectionApi, portalProviderAPI, eventDispatcher) {
+  return new _safePlugin.SafePlugin({
+    key: pluginKey,
+    props: {
+      nodeViews: {
+        layoutSection: function layoutSection(node, view, getPos) {
+          return new _nodeViews.LayoutSectionView({
+            node: node,
+            view: view,
+            getPos: getPos,
+            portalProviderAPI: portalProviderAPI,
+            eventDispatcher: eventDispatcher,
+            pluginInjectionApi: pluginInjectionApi,
+            options: options
+          }).init();
+        }
+      }
+    }
+  });
+};

package/dist/cjs/toolbar.js

@@ -66,6 +66,12 @@ var SIDEBAR_LAYOUT_TYPES = [{
   icon: _layoutThreeColumnsSidebars.default,
   iconFallback: _layoutThreeWithSidebars.default
 }];
+var SIDEBAR_LAYOUT_TYPES_BY_COLUMNS = {
+  2: [SIDEBAR_LAYOUT_TYPES[0], SIDEBAR_LAYOUT_TYPES[1]],
+  3: [SIDEBAR_LAYOUT_TYPES[2]],
+  4: [],
+  5: []
+};
 var buildLayoutButton = function buildLayoutButton(intl, item, currentLayout, editorAnalyticsAPI) {
   return {
     id: item.id,
@@ -144,6 +150,7 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos
       onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('five_equal', intl.formatMessage),
       selected: numberOfColumns === 5
     }];
+    var sidebarTypesByColumns = SIDEBAR_LAYOUT_TYPES_BY_COLUMNS[numberOfColumns];
     return {
       title: layoutToolbarTitle,
       getDomRef: function getDomRef(view) {
@@ -160,9 +167,11 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos
         options: columnOptions,
         showSelected: true,
         testId: 'column-options-button'
-      }] : []), (0, _toConsumableArray2.default)(layoutTypes.map(function (i) {
+      }, sidebarTypesByColumns.length > 0 && separator] : []), (0, _toConsumableArray2.default)(layoutTypes.map(function (i) {
+        return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
+      })), (0, _toConsumableArray2.default)(addSidebarLayouts ? (0, _preRelease.isPreRelease2)() ? sidebarTypesByColumns.map(function (i) {
         return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
-      })), (0, _toConsumableArray2.default)(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(function (i) {
+      }) : SIDEBAR_LAYOUT_TYPES.map(function (i) {
         return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
       }) : []), [separator, {
         type: 'copy-button',

package/dist/es2019/node-views/index.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import ReactNodeView from '@atlaskit/editor-common/react-node-view';
+import { BreakoutResizer, ignoreResizerMutations } from '@atlaskit/editor-common/resizer';
+const LayoutBreakoutResizer = ({
+  pluginInjectionApi,
+  forwardRef,
+  getPos,
+  view
+}) => {
+  const {
+    editorDisabledState
+  } = useSharedPluginState(pluginInjectionApi, ['editorDisabled']);
+  const getEditorWidth = () => {
+    var _pluginInjectionApi$w;
+    return pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.currentState();
+  };
+  return /*#__PURE__*/React.createElement(BreakoutResizer, {
+    getRef: forwardRef,
+    getPos: getPos,
+    editorView: view,
+    node: "layoutSection",
+    getEditorWidth: getEditorWidth,
+    disabled: (editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled) === true
+  });
+};
+export class LayoutSectionView extends ReactNodeView {
+  constructor(props) {
+    super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
+    this.options = props.options;
+  }
+  getContentDOM() {
+    const dom = document.createElement('div');
+    dom.setAttribute('data-layout-section', 'true');
+    this.layoutDOM = dom;
+    this.layoutDOM.setAttribute('data-column-rule-style', this.node.attrs.columnRuleStyle);
+    return {
+      dom
+    };
+  }
+  setDomAttrs(node, element) {
+    if (this.layoutDOM) {
+      this.layoutDOM.setAttribute('data-column-rule-style', node.attrs.columnRuleStyle);
+    }
+  }
+  render(props, forwardRef) {
+    return /*#__PURE__*/React.createElement(LayoutBreakoutResizer, {
+      pluginInjectionApi: props.pluginInjectionApi,
+      forwardRef: forwardRef,
+      getPos: props.getPos,
+      view: props.view
+    });
+  }
+  ignoreMutation(mutation) {
+    return ignoreResizerMutations(mutation);
+  }
+}

package/dist/es2019/plugin.js

@@ -4,9 +4,11 @@ import { layoutSectionWithSingleColumn } from '@atlaskit/adf-schema/schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { layoutMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconFiveColumnLayout, IconFourColumnLayout, IconLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/quick-insert';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayoutColumnsWithAnalytics } from './actions';
 import { default as createLayoutPlugin } from './pm-plugins/main';
 import { pluginKey } from './pm-plugins/plugin-key';
+import { default as createLayoutResizingPlugin } from './pm-plugins/resizing';
 import { buildToolbar } from './toolbar';
 import { GlobalStylesWrapper } from './ui/global-styles';
 import { isPreRelease2 } from './utils/preRelease';
@@ -28,10 +30,20 @@ export const layoutPlugin = ({
       }];
     },
     pmPlugins() {
-      return [{
+      const plugins = [{
         name: 'layout',
         plugin: () => createLayoutPlugin(options)
       }];
+      if ((options.editorAppearance === 'full-page' || options.editorAppearance === 'full-width') && api && fg('platform_editor_advanced_layouts_breakout_resizing')) {
+        plugins.push({
+          name: 'layoutResizing',
+          plugin: ({
+            portalProviderAPI,
+            eventDispatcher
+          }) => createLayoutResizingPlugin(options, api, portalProviderAPI, eventDispatcher)
+        });
+      }
+      return plugins;
     },
     actions: {
       insertLayoutColumns: insertLayoutColumnsWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)

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

@@ -0,0 +1,22 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { LayoutSectionView } from '../node-views';
+export const pluginKey = new PluginKey('layoutResizingPlugin');
+export default ((options, pluginInjectionApi, portalProviderAPI, eventDispatcher) => new SafePlugin({
+  key: pluginKey,
+  props: {
+    nodeViews: {
+      layoutSection: (node, view, getPos) => {
+        return new LayoutSectionView({
+          node,
+          view,
+          getPos,
+          portalProviderAPI,
+          eventDispatcher,
+          pluginInjectionApi,
+          options
+        }).init();
+      }
+    }
+  }
+}));

package/dist/es2019/toolbar.js

@@ -55,6 +55,12 @@ const SIDEBAR_LAYOUT_TYPES = [{
   icon: LayoutThreeColumnsSidebarsIcon,
   iconFallback: LayoutThreeWithSidebarsIcon
 }];
+const SIDEBAR_LAYOUT_TYPES_BY_COLUMNS = {
+  2: [SIDEBAR_LAYOUT_TYPES[0], SIDEBAR_LAYOUT_TYPES[1]],
+  3: [SIDEBAR_LAYOUT_TYPES[2]],
+  4: [],
+  5: []
+};
 const buildLayoutButton = (intl, item, currentLayout, editorAnalyticsAPI) => ({
   id: item.id,
   type: 'button',
@@ -132,6 +138,7 @@ export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts
       onClick: setPresetLayout(editorAnalyticsAPI)('five_equal', intl.formatMessage),
       selected: numberOfColumns === 5
     }];
+    const sidebarTypesByColumns = SIDEBAR_LAYOUT_TYPES_BY_COLUMNS[numberOfColumns];
     return {
       title: layoutToolbarTitle,
       getDomRef: view => findDomRefAtPos(pos, view.domAtPos.bind(view)),
@@ -146,7 +153,7 @@ export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts
         options: columnOptions,
         showSelected: true,
         testId: 'column-options-button'
-      }] : []), ...layoutTypes.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)), ...(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)) : []), separator, {
+      }, sidebarTypesByColumns.length > 0 && separator] : []), ...layoutTypes.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)), ...(addSidebarLayouts ? isPreRelease2() ? sidebarTypesByColumns.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)) : SIDEBAR_LAYOUT_TYPES.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)) : []), separator, {
         type: 'copy-button',
         supportsViewMode: true,
         items: [{

package/dist/esm/node-views/index.js

@@ -0,0 +1,77 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import React from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import ReactNodeView from '@atlaskit/editor-common/react-node-view';
+import { BreakoutResizer, ignoreResizerMutations } from '@atlaskit/editor-common/resizer';
+var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
+  var pluginInjectionApi = _ref.pluginInjectionApi,
+    forwardRef = _ref.forwardRef,
+    getPos = _ref.getPos,
+    view = _ref.view;
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['editorDisabled']),
+    editorDisabledState = _useSharedPluginState.editorDisabledState;
+  var getEditorWidth = function getEditorWidth() {
+    var _pluginInjectionApi$w;
+    return pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.currentState();
+  };
+  return /*#__PURE__*/React.createElement(BreakoutResizer, {
+    getRef: forwardRef,
+    getPos: getPos,
+    editorView: view,
+    node: "layoutSection",
+    getEditorWidth: getEditorWidth,
+    disabled: (editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled) === true
+  });
+};
+export var LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
+  _inherits(LayoutSectionView, _ReactNodeView);
+  var _super = _createSuper(LayoutSectionView);
+  function LayoutSectionView(props) {
+    var _this;
+    _classCallCheck(this, LayoutSectionView);
+    _this = _super.call(this, props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
+    _this.options = props.options;
+    return _this;
+  }
+  _createClass(LayoutSectionView, [{
+    key: "getContentDOM",
+    value: function getContentDOM() {
+      var dom = document.createElement('div');
+      dom.setAttribute('data-layout-section', 'true');
+      this.layoutDOM = dom;
+      this.layoutDOM.setAttribute('data-column-rule-style', this.node.attrs.columnRuleStyle);
+      return {
+        dom: dom
+      };
+    }
+  }, {
+    key: "setDomAttrs",
+    value: function setDomAttrs(node, element) {
+      if (this.layoutDOM) {
+        this.layoutDOM.setAttribute('data-column-rule-style', node.attrs.columnRuleStyle);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render(props, forwardRef) {
+      return /*#__PURE__*/React.createElement(LayoutBreakoutResizer, {
+        pluginInjectionApi: props.pluginInjectionApi,
+        forwardRef: forwardRef,
+        getPos: props.getPos,
+        view: props.view
+      });
+    }
+  }, {
+    key: "ignoreMutation",
+    value: function ignoreMutation(mutation) {
+      return ignoreResizerMutations(mutation);
+    }
+  }]);
+  return LayoutSectionView;
+}(ReactNodeView);

package/dist/esm/plugin.js

@@ -4,9 +4,11 @@ import { layoutSectionWithSingleColumn } from '@atlaskit/adf-schema/schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { layoutMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconFiveColumnLayout, IconFourColumnLayout, IconLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/quick-insert';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayoutColumnsWithAnalytics } from './actions';
 import { default as createLayoutPlugin } from './pm-plugins/main';
 import { pluginKey } from './pm-plugins/plugin-key';
+import { default as createLayoutResizingPlugin } from './pm-plugins/resizing';
 import { buildToolbar } from './toolbar';
 import { GlobalStylesWrapper } from './ui/global-styles';
 import { isPreRelease2 } from './utils/preRelease';
@@ -28,30 +30,41 @@ export var layoutPlugin = function layoutPlugin(_ref) {
       }];
     },
     pmPlugins: function pmPlugins() {
-      return [{
+      var plugins = [{
         name: 'layout',
         plugin: function plugin() {
           return createLayoutPlugin(options);
         }
       }];
+      if ((options.editorAppearance === 'full-page' || options.editorAppearance === 'full-width') && api && fg('platform_editor_advanced_layouts_breakout_resizing')) {
+        plugins.push({
+          name: 'layoutResizing',
+          plugin: function plugin(_ref2) {
+            var portalProviderAPI = _ref2.portalProviderAPI,
+              eventDispatcher = _ref2.eventDispatcher;
+            return createLayoutResizingPlugin(options, api, portalProviderAPI, eventDispatcher);
+          }
+        });
+      }
+      return plugins;
     },
     actions: {
       insertLayoutColumns: insertLayoutColumnsWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)
     },
     pluginsOptions: {
       floatingToolbar: function floatingToolbar(state, intl) {
-        var _ref2 = pluginKey.getState(state),
-          pos = _ref2.pos,
-          allowBreakout = _ref2.allowBreakout,
-          addSidebarLayouts = _ref2.addSidebarLayouts,
-          allowSingleColumnLayout = _ref2.allowSingleColumnLayout;
+        var _ref3 = pluginKey.getState(state),
+          pos = _ref3.pos,
+          allowBreakout = _ref3.allowBreakout,
+          addSidebarLayouts = _ref3.addSidebarLayouts,
+          allowSingleColumnLayout = _ref3.allowSingleColumnLayout;
         if (pos !== null) {
           return buildToolbar(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api);
         }
         return undefined;
       },
-      quickInsert: function quickInsert(_ref3) {
-        var formatMessage = _ref3.formatMessage;
+      quickInsert: function quickInsert(_ref4) {
+        var formatMessage = _ref4.formatMessage;
         return isPreRelease2() ? [{
           id: 'twocolumnslayout',
           title: formatMessage(layoutMessages.twoColumns),

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

@@ -0,0 +1,24 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { LayoutSectionView } from '../node-views';
+export var pluginKey = new PluginKey('layoutResizingPlugin');
+export default (function (options, pluginInjectionApi, portalProviderAPI, eventDispatcher) {
+  return new SafePlugin({
+    key: pluginKey,
+    props: {
+      nodeViews: {
+        layoutSection: function layoutSection(node, view, getPos) {
+          return new LayoutSectionView({
+            node: node,
+            view: view,
+            getPos: getPos,
+            portalProviderAPI: portalProviderAPI,
+            eventDispatcher: eventDispatcher,
+            pluginInjectionApi: pluginInjectionApi,
+            options: options
+          }).init();
+        }
+      }
+    }
+  });
+});

package/dist/esm/toolbar.js

@@ -56,6 +56,12 @@ var SIDEBAR_LAYOUT_TYPES = [{
   icon: LayoutThreeColumnsSidebarsIcon,
   iconFallback: LayoutThreeWithSidebarsIcon
 }];
+var SIDEBAR_LAYOUT_TYPES_BY_COLUMNS = {
+  2: [SIDEBAR_LAYOUT_TYPES[0], SIDEBAR_LAYOUT_TYPES[1]],
+  3: [SIDEBAR_LAYOUT_TYPES[2]],
+  4: [],
+  5: []
+};
 var buildLayoutButton = function buildLayoutButton(intl, item, currentLayout, editorAnalyticsAPI) {
   return {
     id: item.id,
@@ -134,6 +140,7 @@ export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout
       onClick: setPresetLayout(editorAnalyticsAPI)('five_equal', intl.formatMessage),
       selected: numberOfColumns === 5
     }];
+    var sidebarTypesByColumns = SIDEBAR_LAYOUT_TYPES_BY_COLUMNS[numberOfColumns];
     return {
       title: layoutToolbarTitle,
       getDomRef: function getDomRef(view) {
@@ -150,9 +157,11 @@ export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout
         options: columnOptions,
         showSelected: true,
         testId: 'column-options-button'
-      }] : []), _toConsumableArray(layoutTypes.map(function (i) {
+      }, sidebarTypesByColumns.length > 0 && separator] : []), _toConsumableArray(layoutTypes.map(function (i) {
+        return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
+      })), _toConsumableArray(addSidebarLayouts ? isPreRelease2() ? sidebarTypesByColumns.map(function (i) {
         return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
-      })), _toConsumableArray(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(function (i) {
+      }) : SIDEBAR_LAYOUT_TYPES.map(function (i) {
         return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
       }) : []), [separator, {
         type: 'copy-button',

package/dist/types/node-views/index.d.ts

@@ -0,0 +1,42 @@
+/// <reference types="react" />
+import { type EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
+import ReactNodeView from '@atlaskit/editor-common/react-node-view';
+import { type ExtractInjectionAPI, type getPosHandlerNode } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { type EditorView } from '@atlaskit/editor-prosemirror/view';
+import { type LayoutPlugin } from '../plugin';
+import { type LayoutPluginOptions } from '../types';
+type LayoutSectionViewProps = {
+    node: PMNode;
+    view: EditorView;
+    getPos: getPosHandlerNode;
+    portalProviderAPI: PortalProviderAPI;
+    eventDispatcher: EventDispatcher;
+    pluginInjectionApi?: ExtractInjectionAPI<LayoutPlugin>;
+    options: LayoutPluginOptions;
+};
+type ForwardRef = (ref: HTMLElement | null) => void;
+export declare class LayoutSectionView extends ReactNodeView<LayoutSectionViewProps> {
+    options: LayoutPluginOptions;
+    layoutDOM?: HTMLElement;
+    constructor(props: {
+        node: PMNode;
+        view: EditorView;
+        getPos: getPosHandlerNode;
+        portalProviderAPI: PortalProviderAPI;
+        eventDispatcher: EventDispatcher;
+        pluginInjectionApi: ExtractInjectionAPI<LayoutPlugin>;
+        options: LayoutPluginOptions;
+    });
+    getContentDOM(): {
+        dom: HTMLDivElement;
+    };
+    setDomAttrs(node: PMNode, element: HTMLElement): void;
+    render(props: LayoutSectionViewProps, forwardRef: ForwardRef): JSX.Element;
+    ignoreMutation(mutation: MutationRecord | {
+        type: 'selection';
+        target: Element;
+    }): boolean;
+}
+export {};

package/dist/types/plugin.d.ts

@@ -1,13 +1,20 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
+import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
+import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import { insertLayoutColumnsWithAnalytics } from './actions';
 import { pluginKey } from './pm-plugins/plugin-key';
 import type { LayoutPluginOptions } from './types';
 export { pluginKey };
 export type LayoutPlugin = NextEditorPlugin<'layout', {
     pluginConfiguration: LayoutPluginOptions | undefined;
-    dependencies: [DecorationsPlugin, OptionalPlugin<AnalyticsPlugin>];
+    dependencies: [
+        DecorationsPlugin,
+        OptionalPlugin<AnalyticsPlugin>,
+        OptionalPlugin<WidthPlugin>,
+        OptionalPlugin<EditorDisabledPlugin>
+    ];
     actions: {
         insertLayoutColumns: ReturnType<typeof insertLayoutColumnsWithAnalytics>;
     };

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

@@ -0,0 +1,10 @@
+import { type EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { type LayoutPlugin } from '../plugin';
+import type { LayoutPluginOptions } from '../types';
+export declare const pluginKey: PluginKey<any>;
+declare const _default: (options: LayoutPluginOptions, pluginInjectionApi: ExtractInjectionAPI<LayoutPlugin>, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher) => SafePlugin<undefined>;
+export default _default;

package/dist/types/types.d.ts

@@ -1,9 +1,10 @@
-import type { LongPressSelectionPluginOptions } from '@atlaskit/editor-common/types';
+import type { EditorAppearance, LongPressSelectionPluginOptions } from '@atlaskit/editor-common/types';
 import type { Slice } from '@atlaskit/editor-prosemirror/model';
 export interface LayoutPluginOptions extends LongPressSelectionPluginOptions {
     allowBreakout?: boolean;
     UNSAFE_addSidebarLayouts?: boolean;
     UNSAFE_allowSingleColumnLayout?: boolean;
+    editorAppearance?: EditorAppearance;
 }
 export type PresetLayout = 'single' | 'two_equal' | 'three_equal' | 'two_right_sidebar' | 'two_left_sidebar' | 'three_with_sidebars' | 'four_equal' | 'five_equal';
 export interface Change {

package/dist/types-ts4.5/node-views/index.d.ts

@@ -0,0 +1,42 @@
+/// <reference types="react" />
+import { type EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
+import ReactNodeView from '@atlaskit/editor-common/react-node-view';
+import { type ExtractInjectionAPI, type getPosHandlerNode } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { type EditorView } from '@atlaskit/editor-prosemirror/view';
+import { type LayoutPlugin } from '../plugin';
+import { type LayoutPluginOptions } from '../types';
+type LayoutSectionViewProps = {
+    node: PMNode;
+    view: EditorView;
+    getPos: getPosHandlerNode;
+    portalProviderAPI: PortalProviderAPI;
+    eventDispatcher: EventDispatcher;
+    pluginInjectionApi?: ExtractInjectionAPI<LayoutPlugin>;
+    options: LayoutPluginOptions;
+};
+type ForwardRef = (ref: HTMLElement | null) => void;
+export declare class LayoutSectionView extends ReactNodeView<LayoutSectionViewProps> {
+    options: LayoutPluginOptions;
+    layoutDOM?: HTMLElement;
+    constructor(props: {
+        node: PMNode;
+        view: EditorView;
+        getPos: getPosHandlerNode;
+        portalProviderAPI: PortalProviderAPI;
+        eventDispatcher: EventDispatcher;
+        pluginInjectionApi: ExtractInjectionAPI<LayoutPlugin>;
+        options: LayoutPluginOptions;
+    });
+    getContentDOM(): {
+        dom: HTMLDivElement;
+    };
+    setDomAttrs(node: PMNode, element: HTMLElement): void;
+    render(props: LayoutSectionViewProps, forwardRef: ForwardRef): JSX.Element;
+    ignoreMutation(mutation: MutationRecord | {
+        type: 'selection';
+        target: Element;
+    }): boolean;
+}
+export {};

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

@@ -1,6 +1,8 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
+import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
+import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import { insertLayoutColumnsWithAnalytics } from './actions';
 import { pluginKey } from './pm-plugins/plugin-key';
 import type { LayoutPluginOptions } from './types';
@@ -9,7 +11,9 @@ export type LayoutPlugin = NextEditorPlugin<'layout', {
     pluginConfiguration: LayoutPluginOptions | undefined;
     dependencies: [
         DecorationsPlugin,
-        OptionalPlugin<AnalyticsPlugin>
+        OptionalPlugin<AnalyticsPlugin>,
+        OptionalPlugin<WidthPlugin>,
+        OptionalPlugin<EditorDisabledPlugin>
     ];
     actions: {
         insertLayoutColumns: ReturnType<typeof insertLayoutColumnsWithAnalytics>;

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

@@ -0,0 +1,10 @@
+import { type EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { type LayoutPlugin } from '../plugin';
+import type { LayoutPluginOptions } from '../types';
+export declare const pluginKey: PluginKey<any>;
+declare const _default: (options: LayoutPluginOptions, pluginInjectionApi: ExtractInjectionAPI<LayoutPlugin>, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher) => SafePlugin<undefined>;
+export default _default;

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

@@ -1,9 +1,10 @@
-import type { LongPressSelectionPluginOptions } from '@atlaskit/editor-common/types';
+import type { EditorAppearance, LongPressSelectionPluginOptions } from '@atlaskit/editor-common/types';
 import type { Slice } from '@atlaskit/editor-prosemirror/model';
 export interface LayoutPluginOptions extends LongPressSelectionPluginOptions {
     allowBreakout?: boolean;
     UNSAFE_addSidebarLayouts?: boolean;
     UNSAFE_allowSingleColumnLayout?: boolean;
+    editorAppearance?: EditorAppearance;
 }
 export type PresetLayout = 'single' | 'two_equal' | 'three_equal' | 'two_right_sidebar' | 'two_left_sidebar' | 'three_with_sidebars' | 'four_equal' | 'five_equal';
 export interface Change {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-layout",
-	"version": "1.9.9",
+	"version": "1.10.0",
 	"description": "Layout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,14 +32,16 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^44.2.0",
-		"@atlaskit/editor-common": "^94.9.0",
+		"@atlaskit/editor-common": "^94.12.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
 		"@atlaskit/editor-plugin-decorations": "^1.3.0",
+		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
+		"@atlaskit/editor-plugin-width": "^1.3.0",
 		"@atlaskit/editor-prosemirror": "6.0.0",
 		"@atlaskit/icon": "^22.24.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/tmp-editor-statsig": "^2.10.0",
-		"@atlaskit/tokens": "^2.0.0",
+		"@atlaskit/tmp-editor-statsig": "^2.11.0",
+		"@atlaskit/tokens": "^2.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
@@ -91,6 +93,9 @@
 	"platform-feature-flags": {
 		"platform_editor_advanced_layouts_pre_release_2": {
 			"type": "boolean"
+		},
+		"platform_editor_advanced_layouts_breakout_resizing": {
+			"type": "boolean"
 		}
 	}
 }