@atlaskit/editor-plugin-layout 1.9.4 → 1.9.5

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-layout
 
+## 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

@@ -20,6 +20,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;
@@ -72,7 +73,7 @@ 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;
           }
         }, {
@@ -85,7 +86,7 @@ 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;
           }
         }, {
@@ -98,7 +99,7 @@ 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;
           }
         }, {
@@ -111,7 +112,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 +140,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

@@ -73,7 +73,7 @@ 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
   };

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

@@ -7,6 +7,7 @@ import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayou
 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 = ({
@@ -57,7 +58,7 @@ export const layoutPlugin = ({
         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;
         }
       }, {
@@ -68,7 +69,7 @@ export const layoutPlugin = ({
         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;
         }
       }, {
@@ -79,7 +80,7 @@ export const layoutPlugin = ({
         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;
         }
       }, {
@@ -90,7 +91,7 @@ export const layoutPlugin = ({
         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 +116,9 @@ export const layoutPlugin = ({
           return tr;
         }
       }]
+    },
+    contentComponent() {
+      return isPreRelease2() ? /*#__PURE__*/React.createElement(GlobalStylesWrapper, null) : null;
     }
   };
 };

package/dist/es2019/toolbar.js

@@ -61,7 +61,7 @@ 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
 });

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

@@ -7,6 +7,7 @@ import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayou
 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) {
@@ -60,7 +61,7 @@ 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;
           }
         }, {
@@ -73,7 +74,7 @@ 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;
           }
         }, {
@@ -86,7 +87,7 @@ 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;
           }
         }, {
@@ -99,7 +100,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 +128,9 @@ export var layoutPlugin = function layoutPlugin(_ref) {
           }
         }];
       }
+    },
+    contentComponent: function contentComponent() {
+      return isPreRelease2() ? /*#__PURE__*/React.createElement(GlobalStylesWrapper, null) : null;
     }
   };
 };

package/dist/esm/toolbar.js

@@ -63,7 +63,7 @@ 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
   };

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.5",
 	"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.2.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.8.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",