@atlaskit/editor-plugin-layout 1.9.4 → 1.9.6

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/editor-plugin-layout
 
+## 1.9.6
+
+### Patch Changes
+
+- [#155293](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/155293)
+  [`28161e3c04419`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/28161e3c04419) -
+  [ux] Implement toolbar options on layout for setting number of columns
+- [#156078](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/156078)
+  [`2b70196727715`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2b70196727715) -
+  [ux] Update text for inserting multi column layout
+- [#156137](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/156137)
+  [`485e094b29aa9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/485e094b29aa9) -
+  Use stage0 layout node spec behind adv layout experiment
+- Updated dependencies
+
+## 1.9.5
+
+### Patch Changes
+
+- [#155345](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/155345)
+  [`9f00717c4915b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9f00717c4915b) -
+  [ux] Add layout placeholder behind feature gate
+- Updated dependencies
+
 ## 1.9.4
 
 ### Patch Changes

package/dist/cjs/actions.js

@@ -10,12 +10,14 @@ exports.setPresetLayout = exports.insertLayoutColumnsWithAnalytics = exports.ins
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _editorAnalytics = require("@atlaskit/editor-common/editor-analytics");
+var _messages = require("@atlaskit/editor-common/messages");
 var _utils = require("@atlaskit/editor-common/utils");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _consts = require("./consts");
 var _pluginKey = require("./pm-plugins/plugin-key");
+var _preRelease = require("./utils/preRelease");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ONE_COL_LAYOUTS = exports.ONE_COL_LAYOUTS = ['single'];
@@ -68,33 +70,46 @@ var getSelectedLayout = exports.getSelectedLayout = function getSelectedLayout(m
   }
   return current;
 };
-var createMultiColumnLayoutSection = exports.createMultiColumnLayoutSection = function createMultiColumnLayoutSection(state) {
-  var numberOfColumns = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+var createPlaceholderNode = function createPlaceholderNode(schema, formatMessage) {
+  if (!formatMessage) {
+    return undefined;
+  }
+  var _schema$nodes = schema.nodes,
+    paragraph = _schema$nodes.paragraph,
+    placeholder = _schema$nodes.placeholder;
+  //create a paragraph node with content of placeholder node
+  var placeholderNode = placeholder.createChecked({
+    text: formatMessage(_messages.layoutMessages.layoutPlaceholder)
+  });
+  return paragraph.createAndFill(undefined, placeholderNode);
+};
+var createMultiColumnLayoutSection = exports.createMultiColumnLayoutSection = function createMultiColumnLayoutSection(state, numberOfColumns, formatMessage) {
   var _state$schema$nodes = state.schema.nodes,
     layoutSection = _state$schema$nodes.layoutSection,
     layoutColumn = _state$schema$nodes.layoutColumn;
-
-  // create layout based on column number, each column has equal width and trucated to 2 decimal places
+  var placeholder = createPlaceholderNode(state.schema, formatMessage);
+  var layoutColumnNode = layoutColumn.createAndFill({
+    width: _consts.EVEN_DISTRIBUTED_COL_WIDTHS[numberOfColumns]
+  }, placeholder);
   var columns = _model.Fragment.fromArray(Array.from({
     length: numberOfColumns
   }, function () {
-    return layoutColumn.createAndFill({
-      width: _consts.EVEN_DISTRIBUTED_COL_WIDTHS[numberOfColumns]
-    });
+    return layoutColumnNode;
   }));
   return layoutSection.createAndFill(undefined, columns);
 };
-var createDefaultLayoutSection = exports.createDefaultLayoutSection = function createDefaultLayoutSection(state) {
+var createDefaultLayoutSection = exports.createDefaultLayoutSection = function createDefaultLayoutSection(state, formatMessage) {
   var _state$schema$nodes2 = state.schema.nodes,
     layoutSection = _state$schema$nodes2.layoutSection,
     layoutColumn = _state$schema$nodes2.layoutColumn;
+  var placeholder = (0, _preRelease.isPreRelease2)() ? createPlaceholderNode(state.schema, formatMessage) : undefined;
 
   // create a 50-50 layout by default
   var columns = _model.Fragment.fromArray([layoutColumn.createAndFill({
     width: 50
-  }), layoutColumn.createAndFill({
+  }, placeholder), layoutColumn.createAndFill({
     width: 50
-  })]);
+  }, placeholder)]);
   return layoutSection.createAndFill(undefined, columns);
 };
 var insertLayoutColumns = exports.insertLayoutColumns = function insertLayoutColumns(state, dispatch) {
@@ -104,7 +119,7 @@ var insertLayoutColumns = exports.insertLayoutColumns = function insertLayoutCol
   return true;
 };
 var insertLayoutColumnsWithAnalytics = exports.insertLayoutColumnsWithAnalytics = function insertLayoutColumnsWithAnalytics(editorAnalyticsAPI) {
-  return function (inputMethod) {
+  return function (inputMethod, formatMessage) {
     return (0, _editorAnalytics.withAnalytics)(editorAnalyticsAPI, {
       action: _analytics.ACTION.INSERTED,
       actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
@@ -113,21 +128,38 @@ var insertLayoutColumnsWithAnalytics = exports.insertLayoutColumnsWithAnalytics
         inputMethod: inputMethod
       },
       eventType: _analytics.EVENT_TYPE.TRACK
-    })(insertLayoutColumns);
+    })(function (state, dispatch) {
+      if (dispatch) {
+        dispatch((0, _utils2.safeInsert)(createDefaultLayoutSection(state, formatMessage))(state.tr));
+      }
+      return true;
+    });
   };
 };
 
 /**
  * Add a column to the right of existing layout
  */
-function addColumn(schema, pos) {
+function addColumn(schema, pos, formatMessage) {
+  if (!(0, _preRelease.isPreRelease2)()) {
+    return function (tr) {
+      tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos), schema.nodes.layoutColumn.createAndFill());
+    };
+  }
+  var placeholder = createPlaceholderNode(schema, formatMessage);
   return function (tr) {
-    tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos), schema.nodes.layoutColumn.createAndFill());
+    tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos), schema.nodes.layoutColumn.createAndFill(undefined, placeholder));
   };
 }
+var containPlaceholderOnly = function containPlaceholderOnly(node, schema) {
+  var _node$firstChild, _node$firstChild2;
+  return node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.childCount) === 1 && ((_node$firstChild2 = node.firstChild) === null || _node$firstChild2 === void 0 || (_node$firstChild2 = _node$firstChild2.firstChild) === null || _node$firstChild2 === void 0 ? void 0 : _node$firstChild2.type) === schema.nodes.placeholder;
+};
 function removeLastColumnInLayout(column, columnPos, insideRightEdgePos) {
   return function (tr) {
-    if ((0, _utils.isEmptyDocument)(column)) {
+    // check if the column only contains a paragraph with a placeholder text
+    // if so, remove the whole column, otherwise just remove the paragraph
+    if ((0, _utils.isEmptyDocument)(column) || containPlaceholderOnly(column, tr.doc.type.schema)) {
       tr.replaceRange(tr.mapping.map(columnPos - 1), tr.mapping.map(insideRightEdgePos), _model.Slice.empty);
     } else {
       tr.replaceRange(tr.mapping.map(columnPos - 1), tr.mapping.map(columnPos + 1), _model.Slice.empty);
@@ -157,7 +189,7 @@ var fromThreeColstoOne = function fromThreeColstoOne(node, tr, insideRightEdgePo
  * Switching from 3 -> 2 moves all the content of the third col inside the second before
  * removing it
  */
-function forceColumnStructure(state, node, pos, presetLayout) {
+function forceColumnStructure(state, node, pos, presetLayout, formatMessage) {
   var tr = state.tr;
   var insideRightEdgeOfLayoutSection = pos + node.nodeSize - 1;
   var numCols = node.childCount;
@@ -170,7 +202,7 @@ function forceColumnStructure(state, node, pos, presetLayout) {
 
     // 2 columns -> 3 columns
   } else if (THREE_COL_LAYOUTS.indexOf(presetLayout) >= 0 && numCols === 2) {
-    fromTwoColsToThree(state.schema, insideRightEdgeOfLayoutSection)(tr);
+    fromTwoColsToThree(state.schema, insideRightEdgeOfLayoutSection, formatMessage)(tr);
 
     // 2 columns -> 1 column
   } else if (ONE_COL_LAYOUTS.indexOf(presetLayout) >= 0 && numCols === 2) {
@@ -213,8 +245,8 @@ function forceColumnWidths(state, tr, pos, presetLayout) {
   }
   return tr.replaceWith(pos + 1, pos + node.nodeSize - 1, columnWidth(node, state.schema, getWidthsForPreset(presetLayout)));
 }
-function forceSectionToPresetLayout(state, node, pos, presetLayout) {
-  var tr = forceColumnStructure(state, node, pos, presetLayout);
+function forceSectionToPresetLayout(state, node, pos, presetLayout, formatMessage) {
+  var tr = forceColumnStructure(state, node, pos, presetLayout, formatMessage);
 
   // save the selection here, since forcing column widths causes a change over the
   // entire layoutSection, which remaps selection to the end. not remapping here
@@ -225,7 +257,7 @@ function forceSectionToPresetLayout(state, node, pos, presetLayout) {
   return tr.setSelection(state.selection instanceof _state.NodeSelection ? new _state.NodeSelection(selectionPos$) : new _state.TextSelection(selectionPos$));
 }
 var setPresetLayout = exports.setPresetLayout = function setPresetLayout(editorAnalyticsAPI) {
-  return function (layout) {
+  return function (layout, formatMessage) {
     return function (state, dispatch) {
       var _ref = _pluginKey.pluginKey.getState(state),
         pos = _ref.pos,
@@ -237,7 +269,7 @@ var setPresetLayout = exports.setPresetLayout = function setPresetLayout(editorA
       if (!node) {
         return false;
       }
-      var tr = forceSectionToPresetLayout(state, node, pos, layout);
+      var tr = forceSectionToPresetLayout(state, node, pos, layout, formatMessage);
       if (tr) {
         editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
           action: _analytics.ACTION.CHANGED_LAYOUT,

package/dist/cjs/plugin.js

@@ -13,6 +13,7 @@ Object.defineProperty(exports, "pluginKey", {
 });
 var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
+var _schema = require("@atlaskit/adf-schema/schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
@@ -20,6 +21,7 @@ var _actions = require("./actions");
 var _main = _interopRequireDefault(require("./pm-plugins/main"));
 var _pluginKey = require("./pm-plugins/plugin-key");
 var _toolbar = require("./toolbar");
+var _globalStyles = require("./ui/global-styles");
 var _preRelease = require("./utils/preRelease");
 var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
   var _api$analytics;
@@ -31,7 +33,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
     nodes: function nodes() {
       return [{
         name: 'layoutSection',
-        node: _adfSchema.layoutSection
+        node: (0, _preRelease.isPreRelease2)() ? _schema.layoutSectionWithSingleColumn : _adfSchema.layoutSection
       }, {
         name: 'layoutColumn',
         node: _adfSchema.layoutColumn
@@ -64,7 +66,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
         var formatMessage = _ref3.formatMessage;
         return (0, _preRelease.isPreRelease2)() ? [{
           id: 'twocolumnslayout',
-          title: formatMessage(_messages.toolbarInsertBlockMessages.twoColumns),
+          title: formatMessage(_messages.layoutMessages.twoColumns),
           description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescription),
           keywords: ['layout', 'column', 'section', 'two column'],
           priority: 1100,
@@ -72,12 +74,12 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
             return /*#__PURE__*/_react.default.createElement(_quickInsert.IconTwoColumnLayout, null);
           },
           action: function action(insert, state) {
-            var tr = insert((0, _actions.createMultiColumnLayoutSection)(state));
+            var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 2, formatMessage));
             return tr;
           }
         }, {
           id: 'threecolumnslayout',
-          title: formatMessage(_messages.toolbarInsertBlockMessages.threeColumns),
+          title: formatMessage(_messages.layoutMessages.threeColumns),
           description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescription),
           keywords: ['layout', 'column', 'section', 'three column'],
           priority: 1100,
@@ -85,12 +87,12 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
             return /*#__PURE__*/_react.default.createElement(_quickInsert.IconThreeColumnLayout, null);
           },
           action: function action(insert, state) {
-            var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 3));
+            var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 3, formatMessage));
             return tr;
           }
         }, {
           id: 'fourcolumnslayout',
-          title: formatMessage(_messages.toolbarInsertBlockMessages.fourColumns),
+          title: formatMessage(_messages.layoutMessages.fourColumns),
           description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescription),
           keywords: ['layout', 'column', 'section', 'four column'],
           priority: 1100,
@@ -98,12 +100,12 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
             return /*#__PURE__*/_react.default.createElement(_quickInsert.IconFourColumnLayout, null);
           },
           action: function action(insert, state) {
-            var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 4));
+            var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 4, formatMessage));
             return tr;
           }
         }, {
           id: 'fivecolumnslayout',
-          title: formatMessage(_messages.toolbarInsertBlockMessages.fiveColumns),
+          title: formatMessage(_messages.layoutMessages.fiveColumns),
           description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescription),
           keywords: ['layout', 'column', 'section', 'five column'],
           priority: 1100,
@@ -111,7 +113,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
             return /*#__PURE__*/_react.default.createElement(_quickInsert.IconFiveColumnLayout, null);
           },
           action: function action(insert, state) {
-            var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 5));
+            var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 5, formatMessage));
             return tr;
           }
         }] : [{
@@ -139,6 +141,9 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
           }
         }];
       }
+    },
+    contentComponent: function contentComponent() {
+      return (0, _preRelease.isPreRelease2)() ? /*#__PURE__*/_react.default.createElement(_globalStyles.GlobalStylesWrapper, null) : null;
     }
   };
 };

package/dist/cjs/toolbar.js

@@ -24,6 +24,7 @@ var _layoutTwoLeftSidebar = _interopRequireDefault(require("@atlaskit/icon/glyph
 var _layoutTwoRightSidebar = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/layout-two-right-sidebar"));
 var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
 var _actions = require("./actions");
+var _preRelease = require("./utils/preRelease");
 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; }
 var LAYOUT_TYPES = [{
@@ -73,12 +74,13 @@ var buildLayoutButton = function buildLayoutButton(intl, item, currentLayout, ed
     iconFallback: item.iconFallback,
     testId: item.title.id ? "".concat(item.title.id) : undefined,
     title: intl.formatMessage(item.title),
-    onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)(item.type),
+    onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)(item.type, intl.formatMessage),
     selected: !!currentLayout && currentLayout === item.type,
     tabIndex: null
   };
 };
 var layoutToolbarTitle = exports.layoutToolbarTitle = 'Layout floating controls';
+var iconPlaceholder = _layoutTwoColumns.default; // TODO: Replace with proper icon ED-25466
 var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api) {
   var _api$decorations$acti, _api$decorations, _api$analytics;
   var _ref = (_api$decorations$acti = api === null || api === void 0 || (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions) !== null && _api$decorations$acti !== void 0 ? _api$decorations$acti : {},
@@ -87,6 +89,7 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos
   var node = state.doc.nodeAt(pos);
   if (node) {
     var currentLayout = (0, _actions.getPresetLayout)(node);
+    var numberOfColumns = node.content.childCount || 2;
     var separator = {
       type: 'separator'
     };
@@ -107,7 +110,46 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos
       onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
       tabIndex: null
     };
-    var layoutTypes = allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
+    var layoutTypes = (0, _preRelease.isPreRelease2)() ? [] : allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
+    var columnOptions = [{
+      title: intl.formatMessage(_messages.layoutMessages.columnOption, {
+        count: 2
+      }),
+      //'2-columns',
+      icon: iconPlaceholder,
+      onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('two_equal', intl.formatMessage),
+      selected: numberOfColumns === 2
+    }, {
+      title: intl.formatMessage(_messages.layoutMessages.columnOption, {
+        count: 3
+      }),
+      //'3-columns'
+      icon: iconPlaceholder,
+      onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('three_equal', intl.formatMessage),
+      selected: numberOfColumns === 3
+    }, {
+      title: intl.formatMessage(_messages.layoutMessages.columnOption, {
+        count: 4
+      }),
+      //'4-columns'
+      icon: iconPlaceholder,
+      onClick: function onClick() {
+        // TODO: Implement layout update in ED-25053
+        return true;
+      },
+      selected: numberOfColumns === 4
+    }, {
+      title: intl.formatMessage(_messages.layoutMessages.columnOption, {
+        count: 5
+      }),
+      //'5-columns'
+      icon: iconPlaceholder,
+      onClick: function onClick() {
+        // TODO: Implement layout update in ED-25053
+        return true;
+      },
+      selected: numberOfColumns === 5
+    }];
     return {
       title: layoutToolbarTitle,
       getDomRef: function getDomRef(view) {
@@ -115,7 +157,16 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos
       },
       nodeType: nodeType,
       groupLabel: intl.formatMessage(_messages.layoutMessages.floatingToolbarRadioGroupAriaLabel),
-      items: [].concat((0, _toConsumableArray2.default)(layoutTypes.map(function (i) {
+      items: [].concat((0, _toConsumableArray2.default)((0, _preRelease.isPreRelease2)() ? [{
+        type: 'dropdown',
+        title: intl.formatMessage(_messages.layoutMessages.columnOption, {
+          count: numberOfColumns
+        }),
+        //`${numberOfColumns}-columns`,
+        options: columnOptions,
+        showSelected: true,
+        testId: 'column-options-button'
+      }] : []), (0, _toConsumableArray2.default)(layoutTypes.map(function (i) {
         return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
       })), (0, _toConsumableArray2.default)(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(function (i) {
         return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);

package/dist/cjs/ui/global-styles.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GlobalStylesWrapper = void 0;
+var _react = require("@emotion/react");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var globalStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '.ProseMirror [data-layout-column] span.pm-placeholder__text[data-placeholder]': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    '&::after': {
+      color: "var(--ds-text-disabled, #A5ADBA)",
+      font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+      fontStyle: 'italic'
+    }
+  }
+});
+var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper() {
+  return (0, _react.jsx)(_react.Global, {
+    styles: globalStyles
+  });
+};

package/dist/es2019/actions.js

@@ -1,11 +1,13 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, LAYOUT_TYPE } from '@atlaskit/editor-common/analytics';
 import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
+import { layoutMessages as messages } from '@atlaskit/editor-common/messages';
 import { flatmap, getStepRange, isEmptyDocument, mapChildren } from '@atlaskit/editor-common/utils';
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { EVEN_DISTRIBUTED_COL_WIDTHS } from './consts';
 import { pluginKey } from './pm-plugins/plugin-key';
+import { isPreRelease2 } from './utils/preRelease';
 export const ONE_COL_LAYOUTS = ['single'];
 export const TWO_COL_LAYOUTS = ['two_equal', 'two_left_sidebar', 'two_right_sidebar'];
 export const THREE_COL_LAYOUTS = ['three_equal', 'three_with_sidebars'];
@@ -54,32 +56,47 @@ export const getSelectedLayout = (maybeLayoutSection, current) => {
   }
   return current;
 };
-export const createMultiColumnLayoutSection = (state, numberOfColumns = 2) => {
+const createPlaceholderNode = (schema, formatMessage) => {
+  if (!formatMessage) {
+    return undefined;
+  }
+  const {
+    paragraph,
+    placeholder
+  } = schema.nodes;
+  //create a paragraph node with content of placeholder node
+  const placeholderNode = placeholder.createChecked({
+    text: formatMessage(messages.layoutPlaceholder)
+  });
+  return paragraph.createAndFill(undefined, placeholderNode);
+};
+export const createMultiColumnLayoutSection = (state, numberOfColumns, formatMessage) => {
   const {
     layoutSection,
     layoutColumn
   } = state.schema.nodes;
-
-  // create layout based on column number, each column has equal width and trucated to 2 decimal places
+  const placeholder = createPlaceholderNode(state.schema, formatMessage);
+  const layoutColumnNode = layoutColumn.createAndFill({
+    width: EVEN_DISTRIBUTED_COL_WIDTHS[numberOfColumns]
+  }, placeholder);
   const columns = Fragment.fromArray(Array.from({
     length: numberOfColumns
-  }, () => layoutColumn.createAndFill({
-    width: EVEN_DISTRIBUTED_COL_WIDTHS[numberOfColumns]
-  })));
+  }, () => layoutColumnNode));
   return layoutSection.createAndFill(undefined, columns);
 };
-export const createDefaultLayoutSection = state => {
+export const createDefaultLayoutSection = (state, formatMessage) => {
   const {
     layoutSection,
     layoutColumn
   } = state.schema.nodes;
+  const placeholder = isPreRelease2() ? createPlaceholderNode(state.schema, formatMessage) : undefined;
 
   // create a 50-50 layout by default
   const columns = Fragment.fromArray([layoutColumn.createAndFill({
     width: 50
-  }), layoutColumn.createAndFill({
+  }, placeholder), layoutColumn.createAndFill({
     width: 50
-  })]);
+  }, placeholder)]);
   return layoutSection.createAndFill(undefined, columns);
 };
 export const insertLayoutColumns = (state, dispatch) => {
@@ -88,7 +105,7 @@ export const insertLayoutColumns = (state, dispatch) => {
   }
   return true;
 };
-export const insertLayoutColumnsWithAnalytics = editorAnalyticsAPI => inputMethod => withAnalytics(editorAnalyticsAPI, {
+export const insertLayoutColumnsWithAnalytics = editorAnalyticsAPI => (inputMethod, formatMessage) => withAnalytics(editorAnalyticsAPI, {
   action: ACTION.INSERTED,
   actionSubject: ACTION_SUBJECT.DOCUMENT,
   actionSubjectId: ACTION_SUBJECT_ID.LAYOUT,
@@ -96,19 +113,36 @@ export const insertLayoutColumnsWithAnalytics = editorAnalyticsAPI => inputMetho
     inputMethod
   },
   eventType: EVENT_TYPE.TRACK
-})(insertLayoutColumns);
+})((state, dispatch) => {
+  if (dispatch) {
+    dispatch(safeInsert(createDefaultLayoutSection(state, formatMessage))(state.tr));
+  }
+  return true;
+});
 
 /**
  * Add a column to the right of existing layout
  */
-function addColumn(schema, pos) {
+function addColumn(schema, pos, formatMessage) {
+  if (!isPreRelease2()) {
+    return tr => {
+      tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos), schema.nodes.layoutColumn.createAndFill());
+    };
+  }
+  const placeholder = createPlaceholderNode(schema, formatMessage);
   return tr => {
-    tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos), schema.nodes.layoutColumn.createAndFill());
+    tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos), schema.nodes.layoutColumn.createAndFill(undefined, placeholder));
   };
 }
+const containPlaceholderOnly = (node, schema) => {
+  var _node$firstChild, _node$firstChild2, _node$firstChild2$fir;
+  return node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.childCount) === 1 && ((_node$firstChild2 = node.firstChild) === null || _node$firstChild2 === void 0 ? void 0 : (_node$firstChild2$fir = _node$firstChild2.firstChild) === null || _node$firstChild2$fir === void 0 ? void 0 : _node$firstChild2$fir.type) === schema.nodes.placeholder;
+};
 function removeLastColumnInLayout(column, columnPos, insideRightEdgePos) {
   return tr => {
-    if (isEmptyDocument(column)) {
+    // check if the column only contains a paragraph with a placeholder text
+    // if so, remove the whole column, otherwise just remove the paragraph
+    if (isEmptyDocument(column) || containPlaceholderOnly(column, tr.doc.type.schema)) {
       tr.replaceRange(tr.mapping.map(columnPos - 1), tr.mapping.map(insideRightEdgePos), Slice.empty);
     } else {
       tr.replaceRange(tr.mapping.map(columnPos - 1), tr.mapping.map(columnPos + 1), Slice.empty);
@@ -138,7 +172,7 @@ const fromThreeColstoOne = (node, tr, insideRightEdgePos) => {
  * Switching from 3 -> 2 moves all the content of the third col inside the second before
  * removing it
  */
-function forceColumnStructure(state, node, pos, presetLayout) {
+function forceColumnStructure(state, node, pos, presetLayout, formatMessage) {
   const tr = state.tr;
   const insideRightEdgeOfLayoutSection = pos + node.nodeSize - 1;
   const numCols = node.childCount;
@@ -151,7 +185,7 @@ function forceColumnStructure(state, node, pos, presetLayout) {
 
     // 2 columns -> 3 columns
   } else if (THREE_COL_LAYOUTS.indexOf(presetLayout) >= 0 && numCols === 2) {
-    fromTwoColsToThree(state.schema, insideRightEdgeOfLayoutSection)(tr);
+    fromTwoColsToThree(state.schema, insideRightEdgeOfLayoutSection, formatMessage)(tr);
 
     // 2 columns -> 1 column
   } else if (ONE_COL_LAYOUTS.indexOf(presetLayout) >= 0 && numCols === 2) {
@@ -195,8 +229,8 @@ function forceColumnWidths(state, tr, pos, presetLayout) {
   }
   return tr.replaceWith(pos + 1, pos + node.nodeSize - 1, columnWidth(node, state.schema, getWidthsForPreset(presetLayout)));
 }
-export function forceSectionToPresetLayout(state, node, pos, presetLayout) {
-  let tr = forceColumnStructure(state, node, pos, presetLayout);
+export function forceSectionToPresetLayout(state, node, pos, presetLayout, formatMessage) {
+  let tr = forceColumnStructure(state, node, pos, presetLayout, formatMessage);
 
   // save the selection here, since forcing column widths causes a change over the
   // entire layoutSection, which remaps selection to the end. not remapping here
@@ -206,7 +240,7 @@ export function forceSectionToPresetLayout(state, node, pos, presetLayout) {
   const selectionPos$ = tr.doc.resolve(selection.$from.pos);
   return tr.setSelection(state.selection instanceof NodeSelection ? new NodeSelection(selectionPos$) : new TextSelection(selectionPos$));
 }
-export const setPresetLayout = editorAnalyticsAPI => layout => (state, dispatch) => {
+export const setPresetLayout = editorAnalyticsAPI => (layout, formatMessage) => (state, dispatch) => {
   const {
     pos,
     selectedLayout
@@ -218,7 +252,7 @@ export const setPresetLayout = editorAnalyticsAPI => layout => (state, dispatch)
   if (!node) {
     return false;
   }
-  let tr = forceSectionToPresetLayout(state, node, pos, layout);
+  let tr = forceSectionToPresetLayout(state, node, pos, layout, formatMessage);
   if (tr) {
     editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
       action: ACTION.CHANGED_LAYOUT,

package/dist/es2019/plugin.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import { layoutColumn, layoutSection } from '@atlaskit/adf-schema';
+import { layoutSectionWithSingleColumn } from '@atlaskit/adf-schema/schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { layoutMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconFiveColumnLayout, IconFourColumnLayout, IconLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/quick-insert';
 import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayoutColumnsWithAnalytics } from './actions';
 import { default as createLayoutPlugin } from './pm-plugins/main';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { buildToolbar } from './toolbar';
+import { GlobalStylesWrapper } from './ui/global-styles';
 import { isPreRelease2 } from './utils/preRelease';
 export { pluginKey };
 export const layoutPlugin = ({
@@ -19,7 +21,7 @@ export const layoutPlugin = ({
     nodes() {
       return [{
         name: 'layoutSection',
-        node: layoutSection
+        node: isPreRelease2() ? layoutSectionWithSingleColumn : layoutSection
       }, {
         name: 'layoutColumn',
         node: layoutColumn
@@ -51,46 +53,46 @@ export const layoutPlugin = ({
         formatMessage
       }) => isPreRelease2() ? [{
         id: 'twocolumnslayout',
-        title: formatMessage(messages.twoColumns),
+        title: formatMessage(layoutMessages.twoColumns),
         description: formatMessage(messages.columnsDescription),
         keywords: ['layout', 'column', 'section', 'two column'],
         priority: 1100,
         icon: () => /*#__PURE__*/React.createElement(IconTwoColumnLayout, null),
         action(insert, state) {
-          const tr = insert(createMultiColumnLayoutSection(state));
+          const tr = insert(createMultiColumnLayoutSection(state, 2, formatMessage));
           return tr;
         }
       }, {
         id: 'threecolumnslayout',
-        title: formatMessage(messages.threeColumns),
+        title: formatMessage(layoutMessages.threeColumns),
         description: formatMessage(messages.columnsDescription),
         keywords: ['layout', 'column', 'section', 'three column'],
         priority: 1100,
         icon: () => /*#__PURE__*/React.createElement(IconThreeColumnLayout, null),
         action(insert, state) {
-          const tr = insert(createMultiColumnLayoutSection(state, 3));
+          const tr = insert(createMultiColumnLayoutSection(state, 3, formatMessage));
           return tr;
         }
       }, {
         id: 'fourcolumnslayout',
-        title: formatMessage(messages.fourColumns),
+        title: formatMessage(layoutMessages.fourColumns),
         description: formatMessage(messages.columnsDescription),
         keywords: ['layout', 'column', 'section', 'four column'],
         priority: 1100,
         icon: () => /*#__PURE__*/React.createElement(IconFourColumnLayout, null),
         action(insert, state) {
-          const tr = insert(createMultiColumnLayoutSection(state, 4));
+          const tr = insert(createMultiColumnLayoutSection(state, 4, formatMessage));
           return tr;
         }
       }, {
         id: 'fivecolumnslayout',
-        title: formatMessage(messages.fiveColumns),
+        title: formatMessage(layoutMessages.fiveColumns),
         description: formatMessage(messages.columnsDescription),
         keywords: ['layout', 'column', 'section', 'five column'],
         priority: 1100,
         icon: () => /*#__PURE__*/React.createElement(IconFiveColumnLayout, null),
         action(insert, state) {
-          const tr = insert(createMultiColumnLayoutSection(state, 5));
+          const tr = insert(createMultiColumnLayoutSection(state, 5, formatMessage));
           return tr;
         }
       }] : [{
@@ -115,6 +117,9 @@ export const layoutPlugin = ({
           return tr;
         }
       }]
+    },
+    contentComponent() {
+      return isPreRelease2() ? /*#__PURE__*/React.createElement(GlobalStylesWrapper, null) : null;
     }
   };
 };

package/dist/es2019/toolbar.js

@@ -1,4 +1,4 @@
-import commonMessages, { layoutMessages as toolbarMessages } from '@atlaskit/editor-common/messages';
+import commonMessages, { layoutMessages, layoutMessages as toolbarMessages } from '@atlaskit/editor-common/messages';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import LayoutOneColumnIcon from '@atlaskit/icon/core/layout-one-column';
@@ -15,6 +15,7 @@ import LayoutTwoLeftSidebarIcon from '@atlaskit/icon/glyph/editor/layout-two-lef
 import LayoutTwoRightSidebarIcon from '@atlaskit/icon/glyph/editor/layout-two-right-sidebar';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import { deleteActiveLayoutNode, getPresetLayout, setPresetLayout } from './actions';
+import { isPreRelease2 } from './utils/preRelease';
 const LAYOUT_TYPES = [{
   id: 'editor.layout.twoEquals',
   type: 'two_equal',
@@ -61,11 +62,12 @@ const buildLayoutButton = (intl, item, currentLayout, editorAnalyticsAPI) => ({
   iconFallback: item.iconFallback,
   testId: item.title.id ? `${item.title.id}` : undefined,
   title: intl.formatMessage(item.title),
-  onClick: setPresetLayout(editorAnalyticsAPI)(item.type),
+  onClick: setPresetLayout(editorAnalyticsAPI)(item.type, intl.formatMessage),
   selected: !!currentLayout && currentLayout === item.type,
   tabIndex: null
 });
 export const layoutToolbarTitle = 'Layout floating controls';
+const iconPlaceholder = LayoutTwoColumnsIcon; // TODO: Replace with proper icon ED-25466
 export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api) => {
   var _api$decorations$acti, _api$decorations, _api$analytics;
   const {
@@ -75,6 +77,7 @@ export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts
   const node = state.doc.nodeAt(pos);
   if (node) {
     const currentLayout = getPresetLayout(node);
+    const numberOfColumns = node.content.childCount || 2;
     const separator = {
       type: 'separator'
     };
@@ -95,13 +98,61 @@ export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts
       onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
       tabIndex: null
     };
-    const layoutTypes = allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
+    const layoutTypes = isPreRelease2() ? [] : allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
+    const columnOptions = [{
+      title: intl.formatMessage(layoutMessages.columnOption, {
+        count: 2
+      }),
+      //'2-columns',
+      icon: iconPlaceholder,
+      onClick: setPresetLayout(editorAnalyticsAPI)('two_equal', intl.formatMessage),
+      selected: numberOfColumns === 2
+    }, {
+      title: intl.formatMessage(layoutMessages.columnOption, {
+        count: 3
+      }),
+      //'3-columns'
+      icon: iconPlaceholder,
+      onClick: setPresetLayout(editorAnalyticsAPI)('three_equal', intl.formatMessage),
+      selected: numberOfColumns === 3
+    }, {
+      title: intl.formatMessage(layoutMessages.columnOption, {
+        count: 4
+      }),
+      //'4-columns'
+      icon: iconPlaceholder,
+      onClick: () => {
+        // TODO: Implement layout update in ED-25053
+        return true;
+      },
+      selected: numberOfColumns === 4
+    }, {
+      title: intl.formatMessage(layoutMessages.columnOption, {
+        count: 5
+      }),
+      //'5-columns'
+      icon: iconPlaceholder,
+      onClick: () => {
+        // TODO: Implement layout update in ED-25053
+        return true;
+      },
+      selected: numberOfColumns === 5
+    }];
     return {
       title: layoutToolbarTitle,
       getDomRef: view => findDomRefAtPos(pos, view.domAtPos.bind(view)),
       nodeType,
       groupLabel: intl.formatMessage(toolbarMessages.floatingToolbarRadioGroupAriaLabel),
-      items: [...layoutTypes.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)), ...(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)) : []), separator, {
+      items: [...(isPreRelease2() ? [{
+        type: 'dropdown',
+        title: intl.formatMessage(layoutMessages.columnOption, {
+          count: numberOfColumns
+        }),
+        //`${numberOfColumns}-columns`,
+        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, {
         type: 'copy-button',
         supportsViewMode: true,
         items: [{

package/dist/es2019/ui/global-styles.js

@@ -0,0 +1,22 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, Global, jsx } from '@emotion/react';
+const globalStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '.ProseMirror [data-layout-column] span.pm-placeholder__text[data-placeholder]': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    '&::after': {
+      color: "var(--ds-text-disabled, #A5ADBA)",
+      font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+      fontStyle: 'italic'
+    }
+  }
+});
+export const GlobalStylesWrapper = () => {
+  return jsx(Global, {
+    styles: globalStyles
+  });
+};

package/dist/esm/actions.js

@@ -3,12 +3,14 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, LAYOUT_TYPE } from '@atlaskit/editor-common/analytics';
 import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
+import { layoutMessages as messages } from '@atlaskit/editor-common/messages';
 import { flatmap, getStepRange, isEmptyDocument, mapChildren } from '@atlaskit/editor-common/utils';
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { EVEN_DISTRIBUTED_COL_WIDTHS } from './consts';
 import { pluginKey } from './pm-plugins/plugin-key';
+import { isPreRelease2 } from './utils/preRelease';
 export var ONE_COL_LAYOUTS = ['single'];
 export var TWO_COL_LAYOUTS = ['two_equal', 'two_left_sidebar', 'two_right_sidebar'];
 export var THREE_COL_LAYOUTS = ['three_equal', 'three_with_sidebars'];
@@ -59,33 +61,46 @@ export var getSelectedLayout = function getSelectedLayout(maybeLayoutSection, cu
   }
   return current;
 };
-export var createMultiColumnLayoutSection = function createMultiColumnLayoutSection(state) {
-  var numberOfColumns = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+var createPlaceholderNode = function createPlaceholderNode(schema, formatMessage) {
+  if (!formatMessage) {
+    return undefined;
+  }
+  var _schema$nodes = schema.nodes,
+    paragraph = _schema$nodes.paragraph,
+    placeholder = _schema$nodes.placeholder;
+  //create a paragraph node with content of placeholder node
+  var placeholderNode = placeholder.createChecked({
+    text: formatMessage(messages.layoutPlaceholder)
+  });
+  return paragraph.createAndFill(undefined, placeholderNode);
+};
+export var createMultiColumnLayoutSection = function createMultiColumnLayoutSection(state, numberOfColumns, formatMessage) {
   var _state$schema$nodes = state.schema.nodes,
     layoutSection = _state$schema$nodes.layoutSection,
     layoutColumn = _state$schema$nodes.layoutColumn;
-
-  // create layout based on column number, each column has equal width and trucated to 2 decimal places
+  var placeholder = createPlaceholderNode(state.schema, formatMessage);
+  var layoutColumnNode = layoutColumn.createAndFill({
+    width: EVEN_DISTRIBUTED_COL_WIDTHS[numberOfColumns]
+  }, placeholder);
   var columns = Fragment.fromArray(Array.from({
     length: numberOfColumns
   }, function () {
-    return layoutColumn.createAndFill({
-      width: EVEN_DISTRIBUTED_COL_WIDTHS[numberOfColumns]
-    });
+    return layoutColumnNode;
   }));
   return layoutSection.createAndFill(undefined, columns);
 };
-export var createDefaultLayoutSection = function createDefaultLayoutSection(state) {
+export var createDefaultLayoutSection = function createDefaultLayoutSection(state, formatMessage) {
   var _state$schema$nodes2 = state.schema.nodes,
     layoutSection = _state$schema$nodes2.layoutSection,
     layoutColumn = _state$schema$nodes2.layoutColumn;
+  var placeholder = isPreRelease2() ? createPlaceholderNode(state.schema, formatMessage) : undefined;
 
   // create a 50-50 layout by default
   var columns = Fragment.fromArray([layoutColumn.createAndFill({
     width: 50
-  }), layoutColumn.createAndFill({
+  }, placeholder), layoutColumn.createAndFill({
     width: 50
-  })]);
+  }, placeholder)]);
   return layoutSection.createAndFill(undefined, columns);
 };
 export var insertLayoutColumns = function insertLayoutColumns(state, dispatch) {
@@ -95,7 +110,7 @@ export var insertLayoutColumns = function insertLayoutColumns(state, dispatch) {
   return true;
 };
 export var insertLayoutColumnsWithAnalytics = function insertLayoutColumnsWithAnalytics(editorAnalyticsAPI) {
-  return function (inputMethod) {
+  return function (inputMethod, formatMessage) {
     return withAnalytics(editorAnalyticsAPI, {
       action: ACTION.INSERTED,
       actionSubject: ACTION_SUBJECT.DOCUMENT,
@@ -104,21 +119,38 @@ export var insertLayoutColumnsWithAnalytics = function insertLayoutColumnsWithAn
         inputMethod: inputMethod
       },
       eventType: EVENT_TYPE.TRACK
-    })(insertLayoutColumns);
+    })(function (state, dispatch) {
+      if (dispatch) {
+        dispatch(safeInsert(createDefaultLayoutSection(state, formatMessage))(state.tr));
+      }
+      return true;
+    });
   };
 };
 
 /**
  * Add a column to the right of existing layout
  */
-function addColumn(schema, pos) {
+function addColumn(schema, pos, formatMessage) {
+  if (!isPreRelease2()) {
+    return function (tr) {
+      tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos), schema.nodes.layoutColumn.createAndFill());
+    };
+  }
+  var placeholder = createPlaceholderNode(schema, formatMessage);
   return function (tr) {
-    tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos), schema.nodes.layoutColumn.createAndFill());
+    tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos), schema.nodes.layoutColumn.createAndFill(undefined, placeholder));
   };
 }
+var containPlaceholderOnly = function containPlaceholderOnly(node, schema) {
+  var _node$firstChild, _node$firstChild2;
+  return node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.childCount) === 1 && ((_node$firstChild2 = node.firstChild) === null || _node$firstChild2 === void 0 || (_node$firstChild2 = _node$firstChild2.firstChild) === null || _node$firstChild2 === void 0 ? void 0 : _node$firstChild2.type) === schema.nodes.placeholder;
+};
 function removeLastColumnInLayout(column, columnPos, insideRightEdgePos) {
   return function (tr) {
-    if (isEmptyDocument(column)) {
+    // check if the column only contains a paragraph with a placeholder text
+    // if so, remove the whole column, otherwise just remove the paragraph
+    if (isEmptyDocument(column) || containPlaceholderOnly(column, tr.doc.type.schema)) {
       tr.replaceRange(tr.mapping.map(columnPos - 1), tr.mapping.map(insideRightEdgePos), Slice.empty);
     } else {
       tr.replaceRange(tr.mapping.map(columnPos - 1), tr.mapping.map(columnPos + 1), Slice.empty);
@@ -148,7 +180,7 @@ var fromThreeColstoOne = function fromThreeColstoOne(node, tr, insideRightEdgePo
  * Switching from 3 -> 2 moves all the content of the third col inside the second before
  * removing it
  */
-function forceColumnStructure(state, node, pos, presetLayout) {
+function forceColumnStructure(state, node, pos, presetLayout, formatMessage) {
   var tr = state.tr;
   var insideRightEdgeOfLayoutSection = pos + node.nodeSize - 1;
   var numCols = node.childCount;
@@ -161,7 +193,7 @@ function forceColumnStructure(state, node, pos, presetLayout) {
 
     // 2 columns -> 3 columns
   } else if (THREE_COL_LAYOUTS.indexOf(presetLayout) >= 0 && numCols === 2) {
-    fromTwoColsToThree(state.schema, insideRightEdgeOfLayoutSection)(tr);
+    fromTwoColsToThree(state.schema, insideRightEdgeOfLayoutSection, formatMessage)(tr);
 
     // 2 columns -> 1 column
   } else if (ONE_COL_LAYOUTS.indexOf(presetLayout) >= 0 && numCols === 2) {
@@ -204,8 +236,8 @@ function forceColumnWidths(state, tr, pos, presetLayout) {
   }
   return tr.replaceWith(pos + 1, pos + node.nodeSize - 1, columnWidth(node, state.schema, getWidthsForPreset(presetLayout)));
 }
-export function forceSectionToPresetLayout(state, node, pos, presetLayout) {
-  var tr = forceColumnStructure(state, node, pos, presetLayout);
+export function forceSectionToPresetLayout(state, node, pos, presetLayout, formatMessage) {
+  var tr = forceColumnStructure(state, node, pos, presetLayout, formatMessage);
 
   // save the selection here, since forcing column widths causes a change over the
   // entire layoutSection, which remaps selection to the end. not remapping here
@@ -216,7 +248,7 @@ export function forceSectionToPresetLayout(state, node, pos, presetLayout) {
   return tr.setSelection(state.selection instanceof NodeSelection ? new NodeSelection(selectionPos$) : new TextSelection(selectionPos$));
 }
 export var setPresetLayout = function setPresetLayout(editorAnalyticsAPI) {
-  return function (layout) {
+  return function (layout, formatMessage) {
     return function (state, dispatch) {
       var _ref = pluginKey.getState(state),
         pos = _ref.pos,
@@ -228,7 +260,7 @@ export var setPresetLayout = function setPresetLayout(editorAnalyticsAPI) {
       if (!node) {
         return false;
       }
-      var tr = forceSectionToPresetLayout(state, node, pos, layout);
+      var tr = forceSectionToPresetLayout(state, node, pos, layout, formatMessage);
       if (tr) {
         editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
           action: ACTION.CHANGED_LAYOUT,

package/dist/esm/plugin.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import { layoutColumn, layoutSection } from '@atlaskit/adf-schema';
+import { layoutSectionWithSingleColumn } from '@atlaskit/adf-schema/schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { layoutMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconFiveColumnLayout, IconFourColumnLayout, IconLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/quick-insert';
 import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayoutColumnsWithAnalytics } from './actions';
 import { default as createLayoutPlugin } from './pm-plugins/main';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { buildToolbar } from './toolbar';
+import { GlobalStylesWrapper } from './ui/global-styles';
 import { isPreRelease2 } from './utils/preRelease';
 export { pluginKey };
 export var layoutPlugin = function layoutPlugin(_ref) {
@@ -19,7 +21,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
     nodes: function nodes() {
       return [{
         name: 'layoutSection',
-        node: layoutSection
+        node: isPreRelease2() ? layoutSectionWithSingleColumn : layoutSection
       }, {
         name: 'layoutColumn',
         node: layoutColumn
@@ -52,7 +54,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
         var formatMessage = _ref3.formatMessage;
         return isPreRelease2() ? [{
           id: 'twocolumnslayout',
-          title: formatMessage(messages.twoColumns),
+          title: formatMessage(layoutMessages.twoColumns),
           description: formatMessage(messages.columnsDescription),
           keywords: ['layout', 'column', 'section', 'two column'],
           priority: 1100,
@@ -60,12 +62,12 @@ export var layoutPlugin = function layoutPlugin(_ref) {
             return /*#__PURE__*/React.createElement(IconTwoColumnLayout, null);
           },
           action: function action(insert, state) {
-            var tr = insert(createMultiColumnLayoutSection(state));
+            var tr = insert(createMultiColumnLayoutSection(state, 2, formatMessage));
             return tr;
           }
         }, {
           id: 'threecolumnslayout',
-          title: formatMessage(messages.threeColumns),
+          title: formatMessage(layoutMessages.threeColumns),
           description: formatMessage(messages.columnsDescription),
           keywords: ['layout', 'column', 'section', 'three column'],
           priority: 1100,
@@ -73,12 +75,12 @@ export var layoutPlugin = function layoutPlugin(_ref) {
             return /*#__PURE__*/React.createElement(IconThreeColumnLayout, null);
           },
           action: function action(insert, state) {
-            var tr = insert(createMultiColumnLayoutSection(state, 3));
+            var tr = insert(createMultiColumnLayoutSection(state, 3, formatMessage));
             return tr;
           }
         }, {
           id: 'fourcolumnslayout',
-          title: formatMessage(messages.fourColumns),
+          title: formatMessage(layoutMessages.fourColumns),
           description: formatMessage(messages.columnsDescription),
           keywords: ['layout', 'column', 'section', 'four column'],
           priority: 1100,
@@ -86,12 +88,12 @@ export var layoutPlugin = function layoutPlugin(_ref) {
             return /*#__PURE__*/React.createElement(IconFourColumnLayout, null);
           },
           action: function action(insert, state) {
-            var tr = insert(createMultiColumnLayoutSection(state, 4));
+            var tr = insert(createMultiColumnLayoutSection(state, 4, formatMessage));
             return tr;
           }
         }, {
           id: 'fivecolumnslayout',
-          title: formatMessage(messages.fiveColumns),
+          title: formatMessage(layoutMessages.fiveColumns),
           description: formatMessage(messages.columnsDescription),
           keywords: ['layout', 'column', 'section', 'five column'],
           priority: 1100,
@@ -99,7 +101,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
             return /*#__PURE__*/React.createElement(IconFiveColumnLayout, null);
           },
           action: function action(insert, state) {
-            var tr = insert(createMultiColumnLayoutSection(state, 5));
+            var tr = insert(createMultiColumnLayoutSection(state, 5, formatMessage));
             return tr;
           }
         }] : [{
@@ -127,6 +129,9 @@ export var layoutPlugin = function layoutPlugin(_ref) {
           }
         }];
       }
+    },
+    contentComponent: function contentComponent() {
+      return isPreRelease2() ? /*#__PURE__*/React.createElement(GlobalStylesWrapper, null) : null;
     }
   };
 };

package/dist/esm/toolbar.js

@@ -1,5 +1,5 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import commonMessages, { layoutMessages as toolbarMessages } from '@atlaskit/editor-common/messages';
+import commonMessages, { layoutMessages, layoutMessages as toolbarMessages } from '@atlaskit/editor-common/messages';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import LayoutOneColumnIcon from '@atlaskit/icon/core/layout-one-column';
@@ -16,6 +16,7 @@ import LayoutTwoLeftSidebarIcon from '@atlaskit/icon/glyph/editor/layout-two-lef
 import LayoutTwoRightSidebarIcon from '@atlaskit/icon/glyph/editor/layout-two-right-sidebar';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import { deleteActiveLayoutNode, getPresetLayout, setPresetLayout } from './actions';
+import { isPreRelease2 } from './utils/preRelease';
 var LAYOUT_TYPES = [{
   id: 'editor.layout.twoEquals',
   type: 'two_equal',
@@ -63,12 +64,13 @@ var buildLayoutButton = function buildLayoutButton(intl, item, currentLayout, ed
     iconFallback: item.iconFallback,
     testId: item.title.id ? "".concat(item.title.id) : undefined,
     title: intl.formatMessage(item.title),
-    onClick: setPresetLayout(editorAnalyticsAPI)(item.type),
+    onClick: setPresetLayout(editorAnalyticsAPI)(item.type, intl.formatMessage),
     selected: !!currentLayout && currentLayout === item.type,
     tabIndex: null
   };
 };
 export var layoutToolbarTitle = 'Layout floating controls';
+var iconPlaceholder = LayoutTwoColumnsIcon; // TODO: Replace with proper icon ED-25466
 export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api) {
   var _api$decorations$acti, _api$decorations, _api$analytics;
   var _ref = (_api$decorations$acti = api === null || api === void 0 || (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions) !== null && _api$decorations$acti !== void 0 ? _api$decorations$acti : {},
@@ -77,6 +79,7 @@ export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout
   var node = state.doc.nodeAt(pos);
   if (node) {
     var currentLayout = getPresetLayout(node);
+    var numberOfColumns = node.content.childCount || 2;
     var separator = {
       type: 'separator'
     };
@@ -97,7 +100,46 @@ export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout
       onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
       tabIndex: null
     };
-    var layoutTypes = allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
+    var layoutTypes = isPreRelease2() ? [] : allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
+    var columnOptions = [{
+      title: intl.formatMessage(layoutMessages.columnOption, {
+        count: 2
+      }),
+      //'2-columns',
+      icon: iconPlaceholder,
+      onClick: setPresetLayout(editorAnalyticsAPI)('two_equal', intl.formatMessage),
+      selected: numberOfColumns === 2
+    }, {
+      title: intl.formatMessage(layoutMessages.columnOption, {
+        count: 3
+      }),
+      //'3-columns'
+      icon: iconPlaceholder,
+      onClick: setPresetLayout(editorAnalyticsAPI)('three_equal', intl.formatMessage),
+      selected: numberOfColumns === 3
+    }, {
+      title: intl.formatMessage(layoutMessages.columnOption, {
+        count: 4
+      }),
+      //'4-columns'
+      icon: iconPlaceholder,
+      onClick: function onClick() {
+        // TODO: Implement layout update in ED-25053
+        return true;
+      },
+      selected: numberOfColumns === 4
+    }, {
+      title: intl.formatMessage(layoutMessages.columnOption, {
+        count: 5
+      }),
+      //'5-columns'
+      icon: iconPlaceholder,
+      onClick: function onClick() {
+        // TODO: Implement layout update in ED-25053
+        return true;
+      },
+      selected: numberOfColumns === 5
+    }];
     return {
       title: layoutToolbarTitle,
       getDomRef: function getDomRef(view) {
@@ -105,7 +147,16 @@ export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout
       },
       nodeType: nodeType,
       groupLabel: intl.formatMessage(toolbarMessages.floatingToolbarRadioGroupAriaLabel),
-      items: [].concat(_toConsumableArray(layoutTypes.map(function (i) {
+      items: [].concat(_toConsumableArray(isPreRelease2() ? [{
+        type: 'dropdown',
+        title: intl.formatMessage(layoutMessages.columnOption, {
+          count: numberOfColumns
+        }),
+        //`${numberOfColumns}-columns`,
+        options: columnOptions,
+        showSelected: true,
+        testId: 'column-options-button'
+      }] : []), _toConsumableArray(layoutTypes.map(function (i) {
         return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
       })), _toConsumableArray(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(function (i) {
         return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);

package/dist/esm/ui/global-styles.js

@@ -0,0 +1,22 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, Global, jsx } from '@emotion/react';
+var globalStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '.ProseMirror [data-layout-column] span.pm-placeholder__text[data-placeholder]': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    '&::after': {
+      color: "var(--ds-text-disabled, #A5ADBA)",
+      font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+      fontStyle: 'italic'
+    }
+  }
+});
+export var GlobalStylesWrapper = function GlobalStylesWrapper() {
+  return jsx(Global, {
+    styles: globalStyles
+  });
+};

package/dist/types/actions.d.ts

@@ -1,3 +1,4 @@
+import { type IntlShape } from 'react-intl-next';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command, TOOLBAR_MENU_TYPE } from '@atlaskit/editor-common/types';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
@@ -12,12 +13,12 @@ export declare const THREE_COL_LAYOUTS: PresetLayout[];
  */
 export declare const getPresetLayout: (section: Node) => PresetLayout | undefined;
 export declare const getSelectedLayout: (maybeLayoutSection: Node | undefined, current: PresetLayout) => PresetLayout;
-export declare const createMultiColumnLayoutSection: (state: EditorState, numberOfColumns?: number) => Node;
-export declare const createDefaultLayoutSection: (state: EditorState) => Node;
+export declare const createMultiColumnLayoutSection: (state: EditorState, numberOfColumns: number, formatMessage: IntlShape['formatMessage']) => Node;
+export declare const createDefaultLayoutSection: (state: EditorState, formatMessage?: IntlShape['formatMessage']) => Node;
 export declare const insertLayoutColumns: Command;
-export declare const insertLayoutColumnsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (inputMethod: TOOLBAR_MENU_TYPE) => Command;
-export declare function forceSectionToPresetLayout(state: EditorState, node: Node, pos: number, presetLayout: PresetLayout): Transaction;
-export declare const setPresetLayout: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (layout: PresetLayout) => Command;
+export declare const insertLayoutColumnsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (inputMethod: TOOLBAR_MENU_TYPE, formatMessage?: IntlShape['formatMessage']) => Command;
+export declare function forceSectionToPresetLayout(state: EditorState, node: Node, pos: number, presetLayout: PresetLayout, formatMessage?: IntlShape['formatMessage']): Transaction;
+export declare const setPresetLayout: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (layout: PresetLayout, formatMessage?: IntlShape['formatMessage']) => Command;
 export declare const fixColumnSizes: (changedTr: Transaction, state: EditorState) => Change | undefined;
 export declare const fixColumnStructure: (state: EditorState) => Transaction | undefined;
 export declare const deleteActiveLayoutNode: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;

package/dist/types/ui/global-styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { jsx } from '@emotion/react';
+export declare const GlobalStylesWrapper: () => jsx.JSX.Element;

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

@@ -1,3 +1,4 @@
+import { type IntlShape } from 'react-intl-next';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command, TOOLBAR_MENU_TYPE } from '@atlaskit/editor-common/types';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
@@ -12,12 +13,12 @@ export declare const THREE_COL_LAYOUTS: PresetLayout[];
  */
 export declare const getPresetLayout: (section: Node) => PresetLayout | undefined;
 export declare const getSelectedLayout: (maybeLayoutSection: Node | undefined, current: PresetLayout) => PresetLayout;
-export declare const createMultiColumnLayoutSection: (state: EditorState, numberOfColumns?: number) => Node;
-export declare const createDefaultLayoutSection: (state: EditorState) => Node;
+export declare const createMultiColumnLayoutSection: (state: EditorState, numberOfColumns: number, formatMessage: IntlShape['formatMessage']) => Node;
+export declare const createDefaultLayoutSection: (state: EditorState, formatMessage?: IntlShape['formatMessage']) => Node;
 export declare const insertLayoutColumns: Command;
-export declare const insertLayoutColumnsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (inputMethod: TOOLBAR_MENU_TYPE) => Command;
-export declare function forceSectionToPresetLayout(state: EditorState, node: Node, pos: number, presetLayout: PresetLayout): Transaction;
-export declare const setPresetLayout: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (layout: PresetLayout) => Command;
+export declare const insertLayoutColumnsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (inputMethod: TOOLBAR_MENU_TYPE, formatMessage?: IntlShape['formatMessage']) => Command;
+export declare function forceSectionToPresetLayout(state: EditorState, node: Node, pos: number, presetLayout: PresetLayout, formatMessage?: IntlShape['formatMessage']): Transaction;
+export declare const setPresetLayout: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (layout: PresetLayout, formatMessage?: IntlShape['formatMessage']) => Command;
 export declare const fixColumnSizes: (changedTr: Transaction, state: EditorState) => Change | undefined;
 export declare const fixColumnStructure: (state: EditorState) => Transaction | undefined;
 export declare const deleteActiveLayoutNode: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;

package/dist/types-ts4.5/ui/global-styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { jsx } from '@emotion/react';
+export declare const GlobalStylesWrapper: () => jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-layout",
-	"version": "1.9.4",
+	"version": "1.9.6",
 	"description": "Layout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,14 +32,16 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^42.3.1",
-		"@atlaskit/editor-common": "^94.0.0",
+		"@atlaskit/editor-common": "^94.3.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
 		"@atlaskit/editor-plugin-decorations": "^1.3.0",
 		"@atlaskit/editor-prosemirror": "6.0.0",
-		"@atlaskit/icon": "^22.23.0",
+		"@atlaskit/icon": "^22.24.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/tmp-editor-statsig": "^2.7.0",
-		"@babel/runtime": "^7.0.0"
+		"@atlaskit/tmp-editor-statsig": "^2.9.0",
+		"@atlaskit/tokens": "^2.0.0",
+		"@babel/runtime": "^7.0.0",
+		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
 		"react": "^16.8.0 || ^17.0.0 || ~18.2.0",