@atlaskit/editor-plugin-layout 1.12.7 → 1.12.8

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-layout
 
+## 1.12.8
+
+### Patch Changes
+
+- [#169277](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/169277)
+  [`4d8433c0b731a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4d8433c0b731a) -
+  ED-25872 improve placeholder usability for layout
+- Updated dependencies
+
 ## 1.12.7
 
 ### Patch Changes

package/dist/cjs/actions.js

@@ -10,7 +10,6 @@ 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");
@@ -135,46 +134,31 @@ var getSelectedLayout = exports.getSelectedLayout = function getSelectedLayout(m
   }
   return current;
 };
-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 createMultiColumnLayoutSection = exports.createMultiColumnLayoutSection = function createMultiColumnLayoutSection(state) {
+  var numberOfColumns = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
   var _state$schema$nodes = state.schema.nodes,
     layoutSection = _state$schema$nodes.layoutSection,
     layoutColumn = _state$schema$nodes.layoutColumn;
-  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 layoutColumnNode;
+    return layoutColumn.createAndFill({
+      width: _consts.EVEN_DISTRIBUTED_COL_WIDTHS[numberOfColumns]
+    });
   }));
   return layoutSection.createAndFill(undefined, columns);
 };
-var createDefaultLayoutSection = exports.createDefaultLayoutSection = function createDefaultLayoutSection(state, formatMessage) {
+var createDefaultLayoutSection = exports.createDefaultLayoutSection = function createDefaultLayoutSection(state) {
   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
-  }, placeholder), layoutColumn.createAndFill({
+  }), layoutColumn.createAndFill({
     width: 50
-  }, placeholder)]);
+  })]);
   return layoutSection.createAndFill(undefined, columns);
 };
 var insertLayoutColumns = exports.insertLayoutColumns = function insertLayoutColumns(state, dispatch) {
@@ -184,7 +168,7 @@ var insertLayoutColumns = exports.insertLayoutColumns = function insertLayoutCol
   return true;
 };
 var insertLayoutColumnsWithAnalytics = exports.insertLayoutColumnsWithAnalytics = function insertLayoutColumnsWithAnalytics(editorAnalyticsAPI) {
-  return function (inputMethod, formatMessage) {
+  return function (inputMethod) {
     return (0, _editorAnalytics.withAnalytics)(editorAnalyticsAPI, {
       action: _analytics.ACTION.INSERTED,
       actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
@@ -195,7 +179,7 @@ var insertLayoutColumnsWithAnalytics = exports.insertLayoutColumnsWithAnalytics
       eventType: _analytics.EVENT_TYPE.TRACK
     })(function (state, dispatch) {
       if (dispatch) {
-        dispatch((0, _utils2.safeInsert)(createDefaultLayoutSection(state, formatMessage))(state.tr));
+        dispatch((0, _utils2.safeInsert)(createDefaultLayoutSection(state))(state.tr));
       }
       return true;
     });
@@ -205,26 +189,21 @@ var insertLayoutColumnsWithAnalytics = exports.insertLayoutColumnsWithAnalytics
 /**
  * Add a column to the right of existing layout
  */
-function addColumn(schema, pos, formatMessage) {
+function addColumn(schema, pos) {
   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(undefined, placeholder));
+    tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos), schema.nodes.layoutColumn.createAndFill(undefined));
   };
 }
-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) {
     // 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)) {
+    if ((0, _utils.isEmptyDocument)(column)) {
       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);
@@ -249,10 +228,9 @@ var fromThreeColstoOne = function fromThreeColstoOne(node, tr, insideRightEdgePo
 };
 var increaseColumns = function increaseColumns(schema, pos) {
   var newColumnsNumber = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-  var formatMessage = arguments.length > 3 ? arguments[3] : undefined;
   return function (tr) {
     for (var i = 0; i < newColumnsNumber; i++) {
-      addColumn(schema, pos, formatMessage)(tr);
+      addColumn(schema, pos)(tr);
     }
   };
 };
@@ -276,7 +254,7 @@ var decreaseColumns = function decreaseColumns(node, 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, formatMessage) {
+function forceColumnStructure(state, node, pos, presetLayout) {
   var tr = state.tr;
   var insideRightEdgeOfLayoutSection = pos + node.nodeSize - 1;
   var numCols = node.childCount;
@@ -289,7 +267,7 @@ function forceColumnStructure(state, node, pos, presetLayout, formatMessage) {
 
     // 2 columns -> 3 columns
   } else if (THREE_COL_LAYOUTS.indexOf(presetLayout) >= 0 && numCols === 2) {
-    fromTwoColsToThree(state.schema, insideRightEdgeOfLayoutSection, formatMessage)(tr);
+    fromTwoColsToThree(state.schema, insideRightEdgeOfLayoutSection)(tr);
 
     // 2 columns -> 1 column
   } else if (ONE_COL_LAYOUTS.indexOf(presetLayout) >= 0 && numCols === 2) {
@@ -310,13 +288,13 @@ function forceColumnStructure(state, node, pos, presetLayout, formatMessage) {
   }
   return tr;
 }
-function forceColumnStructureNew(state, node, pos, presetLayout, formatMessage) {
+function forceColumnStructureNew(state, node, pos, presetLayout) {
   var tr = state.tr;
   var insideRightEdgeOfLayoutSection = pos + node.nodeSize - 1;
   var numCols = node.childCount;
   var columnChange = getWidthsForPreset(presetLayout).length - numCols;
   if (columnChange > 0) {
-    increaseColumns(state.schema, insideRightEdgeOfLayoutSection, columnChange, formatMessage)(tr);
+    increaseColumns(state.schema, insideRightEdgeOfLayoutSection, columnChange)(tr);
   } else if (columnChange < 0) {
     decreaseColumns(node, insideRightEdgeOfLayoutSection, -columnChange)(tr);
   }
@@ -344,9 +322,9 @@ 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, formatMessage) {
+function forceSectionToPresetLayout(state, node, pos, presetLayout) {
   var forceColumnStructureFn = (0, _preRelease.isPreRelease2)() ? forceColumnStructureNew : forceColumnStructure;
-  var tr = forceColumnStructureFn(state, node, pos, presetLayout, formatMessage);
+  var tr = forceColumnStructureFn(state, node, pos, presetLayout);
 
   // save the selection here, since forcing column widths causes a change over the
   // entire layoutSection, which remaps selection to the end. not remapping here
@@ -357,7 +335,7 @@ function forceSectionToPresetLayout(state, node, pos, presetLayout, formatMessag
   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, formatMessage) {
+  return function (layout) {
     return function (state, dispatch) {
       var _ref = _pluginKey.pluginKey.getState(state),
         pos = _ref.pos,
@@ -369,7 +347,7 @@ var setPresetLayout = exports.setPresetLayout = function setPresetLayout(editorA
       if (!node) {
         return false;
       }
-      var tr = forceSectionToPresetLayout(state, node, pos, layout, formatMessage);
+      var tr = forceSectionToPresetLayout(state, node, pos, layout);
       if (tr) {
         editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
           action: _analytics.ACTION.CHANGED_LAYOUT,

package/dist/cjs/plugin.js

@@ -87,7 +87,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, 2, formatMessage));
+            var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 2));
             return tr;
           }
         }, {
@@ -100,7 +100,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, formatMessage));
+            var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 3));
             return tr;
           }
         }, {
@@ -113,7 +113,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, formatMessage));
+            var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 4));
             return tr;
           }
         }, {
@@ -126,7 +126,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, formatMessage));
+            var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 5));
             return tr;
           }
         }] : [{

package/dist/cjs/toolbar.js

@@ -123,7 +123,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, intl.formatMessage),
+    onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)(item.type),
     selected: !!currentLayout && currentLayout === item.type,
     tabIndex: null
   };
@@ -149,7 +149,7 @@ var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
     }),
     //'2-columns',
     icon: iconPlaceholder,
-    onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('two_equal', intl.formatMessage),
+    onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('two_equal'),
     selected: numberOfColumns === 2
   }, {
     title: intl.formatMessage(_messages.layoutMessages.columnOption, {
@@ -157,7 +157,7 @@ var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
     }),
     //'3-columns'
     icon: iconPlaceholder,
-    onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('three_equal', intl.formatMessage),
+    onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('three_equal'),
     selected: numberOfColumns === 3
   }, {
     title: intl.formatMessage(_messages.layoutMessages.columnOption, {
@@ -165,7 +165,7 @@ var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
     }),
     //'4-columns'
     icon: iconPlaceholder,
-    onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('four_equal', intl.formatMessage),
+    onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('four_equal'),
     selected: numberOfColumns === 4
   }, {
     title: intl.formatMessage(_messages.layoutMessages.columnOption, {
@@ -173,7 +173,7 @@ var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
     }),
     //'5-columns'
     icon: iconPlaceholder,
-    onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('five_equal', intl.formatMessage),
+    onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('five_equal'),
     selected: numberOfColumns === 5
   }];
   return [{

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

@@ -4,26 +4,41 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GlobalStylesWrapper = void 0;
-var _react = require("@emotion/react");
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("@atlaskit/editor-common/messages");
 /**
  * @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'
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled
+
+var getPlaceholderStyle = function getPlaceholderStyle(message) {
+  return (0, _react2.css)({
+    // when paragraph is the only child, and it only has a trailingBreak.
+    // 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] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+      '&::before': {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+        content: "\"".concat(message, "\""),
+        position: 'absolute',
+        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)",
+        marginTop: "var(--ds-space-050, 4px)"
+      }
     }
-  }
-});
+  });
+};
 var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper() {
-  return (0, _react.jsx)(_react.Global, {
-    styles: globalStyles
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var placeholderStyle = (0, _react.useMemo)(function () {
+    return getPlaceholderStyle(formatMessage(_messages.layoutMessages.layoutPlaceholder));
+  }, [formatMessage]);
+  return (0, _react2.jsx)(_react2.Global, {
+    styles: placeholderStyle
   });
 };

package/dist/es2019/actions.js

@@ -1,6 +1,5 @@
 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';
@@ -119,47 +118,30 @@ export const getSelectedLayout = (maybeLayoutSection, current) => {
   }
   return current;
 };
-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) => {
+export const createMultiColumnLayoutSection = (state, numberOfColumns = 2) => {
   const {
     layoutSection,
     layoutColumn
   } = state.schema.nodes;
-  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
-  }, () => layoutColumnNode));
+  }, () => layoutColumn.createAndFill({
+    width: EVEN_DISTRIBUTED_COL_WIDTHS[numberOfColumns]
+  })));
   return layoutSection.createAndFill(undefined, columns);
 };
-export const createDefaultLayoutSection = (state, formatMessage) => {
+export const createDefaultLayoutSection = state => {
   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
-  }, placeholder), layoutColumn.createAndFill({
+  }), layoutColumn.createAndFill({
     width: 50
-  }, placeholder)]);
+  })]);
   return layoutSection.createAndFill(undefined, columns);
 };
 export const insertLayoutColumns = (state, dispatch) => {
@@ -168,7 +150,7 @@ export const insertLayoutColumns = (state, dispatch) => {
   }
   return true;
 };
-export const insertLayoutColumnsWithAnalytics = editorAnalyticsAPI => (inputMethod, formatMessage) => withAnalytics(editorAnalyticsAPI, {
+export const insertLayoutColumnsWithAnalytics = editorAnalyticsAPI => inputMethod => withAnalytics(editorAnalyticsAPI, {
   action: ACTION.INSERTED,
   actionSubject: ACTION_SUBJECT.DOCUMENT,
   actionSubjectId: ACTION_SUBJECT_ID.LAYOUT,
@@ -178,7 +160,7 @@ export const insertLayoutColumnsWithAnalytics = editorAnalyticsAPI => (inputMeth
   eventType: EVENT_TYPE.TRACK
 })((state, dispatch) => {
   if (dispatch) {
-    dispatch(safeInsert(createDefaultLayoutSection(state, formatMessage))(state.tr));
+    dispatch(safeInsert(createDefaultLayoutSection(state))(state.tr));
   }
   return true;
 });
@@ -186,26 +168,21 @@ export const insertLayoutColumnsWithAnalytics = editorAnalyticsAPI => (inputMeth
 /**
  * Add a column to the right of existing layout
  */
-function addColumn(schema, pos, formatMessage) {
+function addColumn(schema, pos) {
   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(undefined, placeholder));
+    tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos), schema.nodes.layoutColumn.createAndFill(undefined));
   };
 }
-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 => {
     // 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)) {
+    if (isEmptyDocument(column)) {
       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);
@@ -228,10 +205,10 @@ const fromThreeColstoOne = (node, tr, insideRightEdgePos) => {
   const secondColumn = node.content.child(1);
   fromTwoColsToOne(secondColumn, insideRightEdgePos - thirdColumn.nodeSize - secondColumn.nodeSize, insideRightEdgePos)(tr);
 };
-const increaseColumns = (schema, pos, newColumnsNumber = 1, formatMessage) => {
+const increaseColumns = (schema, pos, newColumnsNumber = 1) => {
   return tr => {
     for (let i = 0; i < newColumnsNumber; i++) {
-      addColumn(schema, pos, formatMessage)(tr);
+      addColumn(schema, pos)(tr);
     }
   };
 };
@@ -254,7 +231,7 @@ const decreaseColumns = (node, insideRightEdgePos, columnsNumberToRemove = 1) =>
  * Switching from 3 -> 2 moves all the content of the third col inside the second before
  * removing it
  */
-function forceColumnStructure(state, node, pos, presetLayout, formatMessage) {
+function forceColumnStructure(state, node, pos, presetLayout) {
   const tr = state.tr;
   const insideRightEdgeOfLayoutSection = pos + node.nodeSize - 1;
   const numCols = node.childCount;
@@ -267,7 +244,7 @@ function forceColumnStructure(state, node, pos, presetLayout, formatMessage) {
 
     // 2 columns -> 3 columns
   } else if (THREE_COL_LAYOUTS.indexOf(presetLayout) >= 0 && numCols === 2) {
-    fromTwoColsToThree(state.schema, insideRightEdgeOfLayoutSection, formatMessage)(tr);
+    fromTwoColsToThree(state.schema, insideRightEdgeOfLayoutSection)(tr);
 
     // 2 columns -> 1 column
   } else if (ONE_COL_LAYOUTS.indexOf(presetLayout) >= 0 && numCols === 2) {
@@ -288,13 +265,13 @@ function forceColumnStructure(state, node, pos, presetLayout, formatMessage) {
   }
   return tr;
 }
-function forceColumnStructureNew(state, node, pos, presetLayout, formatMessage) {
+function forceColumnStructureNew(state, node, pos, presetLayout) {
   const tr = state.tr;
   const insideRightEdgeOfLayoutSection = pos + node.nodeSize - 1;
   const numCols = node.childCount;
   const columnChange = getWidthsForPreset(presetLayout).length - numCols;
   if (columnChange > 0) {
-    increaseColumns(state.schema, insideRightEdgeOfLayoutSection, columnChange, formatMessage)(tr);
+    increaseColumns(state.schema, insideRightEdgeOfLayoutSection, columnChange)(tr);
   } else if (columnChange < 0) {
     decreaseColumns(node, insideRightEdgeOfLayoutSection, -columnChange)(tr);
   }
@@ -323,9 +300,9 @@ 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, formatMessage) {
+export function forceSectionToPresetLayout(state, node, pos, presetLayout) {
   const forceColumnStructureFn = isPreRelease2() ? forceColumnStructureNew : forceColumnStructure;
-  let tr = forceColumnStructureFn(state, node, pos, presetLayout, formatMessage);
+  let tr = forceColumnStructureFn(state, node, pos, presetLayout);
 
   // save the selection here, since forcing column widths causes a change over the
   // entire layoutSection, which remaps selection to the end. not remapping here
@@ -335,7 +312,7 @@ export function forceSectionToPresetLayout(state, node, pos, presetLayout, forma
   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, formatMessage) => (state, dispatch) => {
+export const setPresetLayout = editorAnalyticsAPI => layout => (state, dispatch) => {
   const {
     pos,
     selectedLayout
@@ -347,7 +324,7 @@ export const setPresetLayout = editorAnalyticsAPI => (layout, formatMessage) =>
   if (!node) {
     return false;
   }
-  let tr = forceSectionToPresetLayout(state, node, pos, layout, formatMessage);
+  let tr = forceSectionToPresetLayout(state, node, pos, layout);
   if (tr) {
     editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
       action: ACTION.CHANGED_LAYOUT,

package/dist/es2019/plugin.js

@@ -71,7 +71,7 @@ export const layoutPlugin = ({
         priority: 1100,
         icon: () => /*#__PURE__*/React.createElement(IconTwoColumnLayout, null),
         action(insert, state) {
-          const tr = insert(createMultiColumnLayoutSection(state, 2, formatMessage));
+          const tr = insert(createMultiColumnLayoutSection(state, 2));
           return tr;
         }
       }, {
@@ -82,7 +82,7 @@ export const layoutPlugin = ({
         priority: 1100,
         icon: () => /*#__PURE__*/React.createElement(IconThreeColumnLayout, null),
         action(insert, state) {
-          const tr = insert(createMultiColumnLayoutSection(state, 3, formatMessage));
+          const tr = insert(createMultiColumnLayoutSection(state, 3));
           return tr;
         }
       }, {
@@ -93,7 +93,7 @@ export const layoutPlugin = ({
         priority: 1100,
         icon: () => /*#__PURE__*/React.createElement(IconFourColumnLayout, null),
         action(insert, state) {
-          const tr = insert(createMultiColumnLayoutSection(state, 4, formatMessage));
+          const tr = insert(createMultiColumnLayoutSection(state, 4));
           return tr;
         }
       }, {
@@ -104,7 +104,7 @@ export const layoutPlugin = ({
         priority: 1100,
         icon: () => /*#__PURE__*/React.createElement(IconFiveColumnLayout, null),
         action(insert, state) {
-          const tr = insert(createMultiColumnLayoutSection(state, 5, formatMessage));
+          const tr = insert(createMultiColumnLayoutSection(state, 5));
           return tr;
         }
       }] : [{

package/dist/es2019/toolbar.js

@@ -111,7 +111,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, intl.formatMessage),
+  onClick: setPresetLayout(editorAnalyticsAPI)(item.type),
   selected: !!currentLayout && currentLayout === item.type,
   tabIndex: null
 });
@@ -137,7 +137,7 @@ const getAdvancedLayoutItems = ({
     }),
     //'2-columns',
     icon: iconPlaceholder,
-    onClick: setPresetLayout(editorAnalyticsAPI)('two_equal', intl.formatMessage),
+    onClick: setPresetLayout(editorAnalyticsAPI)('two_equal'),
     selected: numberOfColumns === 2
   }, {
     title: intl.formatMessage(layoutMessages.columnOption, {
@@ -145,7 +145,7 @@ const getAdvancedLayoutItems = ({
     }),
     //'3-columns'
     icon: iconPlaceholder,
-    onClick: setPresetLayout(editorAnalyticsAPI)('three_equal', intl.formatMessage),
+    onClick: setPresetLayout(editorAnalyticsAPI)('three_equal'),
     selected: numberOfColumns === 3
   }, {
     title: intl.formatMessage(layoutMessages.columnOption, {
@@ -153,7 +153,7 @@ const getAdvancedLayoutItems = ({
     }),
     //'4-columns'
     icon: iconPlaceholder,
-    onClick: setPresetLayout(editorAnalyticsAPI)('four_equal', intl.formatMessage),
+    onClick: setPresetLayout(editorAnalyticsAPI)('four_equal'),
     selected: numberOfColumns === 4
   }, {
     title: intl.formatMessage(layoutMessages.columnOption, {
@@ -161,7 +161,7 @@ const getAdvancedLayoutItems = ({
     }),
     //'5-columns'
     icon: iconPlaceholder,
-    onClick: setPresetLayout(editorAnalyticsAPI)('five_equal', intl.formatMessage),
+    onClick: setPresetLayout(editorAnalyticsAPI)('five_equal'),
     selected: numberOfColumns === 5
   }];
   return [{

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

@@ -2,21 +2,35 @@
  * @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 { useMemo } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled
 import { css, Global, jsx } from '@emotion/react';
-const globalStyles = css({
+import { useIntl } from 'react-intl-next';
+import { layoutMessages as messages } from '@atlaskit/editor-common/messages';
+const getPlaceholderStyle = message => css({
+  // when paragraph is the only child, and it only has a trailingBreak.
   // 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]': {
+  '.ProseMirror [data-layout-column] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-    '&::after': {
+    '&::before': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+      content: `"${message}"`,
+      position: 'absolute',
       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'
+      marginTop: "var(--ds-space-050, 4px)"
     }
   }
 });
 export const GlobalStylesWrapper = () => {
+  const {
+    formatMessage
+  } = useIntl();
+  const placeholderStyle = useMemo(() => {
+    return getPlaceholderStyle(formatMessage(messages.layoutPlaceholder));
+  }, [formatMessage]);
   return jsx(Global, {
-    styles: globalStyles
+    styles: placeholderStyle
   });
 };

package/dist/esm/actions.js

@@ -3,7 +3,6 @@ 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';
@@ -126,46 +125,31 @@ export var getSelectedLayout = function getSelectedLayout(maybeLayoutSection, cu
   }
   return current;
 };
-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) {
+export var createMultiColumnLayoutSection = function createMultiColumnLayoutSection(state) {
+  var numberOfColumns = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
   var _state$schema$nodes = state.schema.nodes,
     layoutSection = _state$schema$nodes.layoutSection,
     layoutColumn = _state$schema$nodes.layoutColumn;
-  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 layoutColumnNode;
+    return layoutColumn.createAndFill({
+      width: EVEN_DISTRIBUTED_COL_WIDTHS[numberOfColumns]
+    });
   }));
   return layoutSection.createAndFill(undefined, columns);
 };
-export var createDefaultLayoutSection = function createDefaultLayoutSection(state, formatMessage) {
+export var createDefaultLayoutSection = function createDefaultLayoutSection(state) {
   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
-  }, placeholder), layoutColumn.createAndFill({
+  }), layoutColumn.createAndFill({
     width: 50
-  }, placeholder)]);
+  })]);
   return layoutSection.createAndFill(undefined, columns);
 };
 export var insertLayoutColumns = function insertLayoutColumns(state, dispatch) {
@@ -175,7 +159,7 @@ export var insertLayoutColumns = function insertLayoutColumns(state, dispatch) {
   return true;
 };
 export var insertLayoutColumnsWithAnalytics = function insertLayoutColumnsWithAnalytics(editorAnalyticsAPI) {
-  return function (inputMethod, formatMessage) {
+  return function (inputMethod) {
     return withAnalytics(editorAnalyticsAPI, {
       action: ACTION.INSERTED,
       actionSubject: ACTION_SUBJECT.DOCUMENT,
@@ -186,7 +170,7 @@ export var insertLayoutColumnsWithAnalytics = function insertLayoutColumnsWithAn
       eventType: EVENT_TYPE.TRACK
     })(function (state, dispatch) {
       if (dispatch) {
-        dispatch(safeInsert(createDefaultLayoutSection(state, formatMessage))(state.tr));
+        dispatch(safeInsert(createDefaultLayoutSection(state))(state.tr));
       }
       return true;
     });
@@ -196,26 +180,21 @@ export var insertLayoutColumnsWithAnalytics = function insertLayoutColumnsWithAn
 /**
  * Add a column to the right of existing layout
  */
-function addColumn(schema, pos, formatMessage) {
+function addColumn(schema, pos) {
   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(undefined, placeholder));
+    tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos), schema.nodes.layoutColumn.createAndFill(undefined));
   };
 }
-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) {
     // 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)) {
+    if (isEmptyDocument(column)) {
       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);
@@ -240,10 +219,9 @@ var fromThreeColstoOne = function fromThreeColstoOne(node, tr, insideRightEdgePo
 };
 var increaseColumns = function increaseColumns(schema, pos) {
   var newColumnsNumber = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-  var formatMessage = arguments.length > 3 ? arguments[3] : undefined;
   return function (tr) {
     for (var i = 0; i < newColumnsNumber; i++) {
-      addColumn(schema, pos, formatMessage)(tr);
+      addColumn(schema, pos)(tr);
     }
   };
 };
@@ -267,7 +245,7 @@ var decreaseColumns = function decreaseColumns(node, 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, formatMessage) {
+function forceColumnStructure(state, node, pos, presetLayout) {
   var tr = state.tr;
   var insideRightEdgeOfLayoutSection = pos + node.nodeSize - 1;
   var numCols = node.childCount;
@@ -280,7 +258,7 @@ function forceColumnStructure(state, node, pos, presetLayout, formatMessage) {
 
     // 2 columns -> 3 columns
   } else if (THREE_COL_LAYOUTS.indexOf(presetLayout) >= 0 && numCols === 2) {
-    fromTwoColsToThree(state.schema, insideRightEdgeOfLayoutSection, formatMessage)(tr);
+    fromTwoColsToThree(state.schema, insideRightEdgeOfLayoutSection)(tr);
 
     // 2 columns -> 1 column
   } else if (ONE_COL_LAYOUTS.indexOf(presetLayout) >= 0 && numCols === 2) {
@@ -301,13 +279,13 @@ function forceColumnStructure(state, node, pos, presetLayout, formatMessage) {
   }
   return tr;
 }
-function forceColumnStructureNew(state, node, pos, presetLayout, formatMessage) {
+function forceColumnStructureNew(state, node, pos, presetLayout) {
   var tr = state.tr;
   var insideRightEdgeOfLayoutSection = pos + node.nodeSize - 1;
   var numCols = node.childCount;
   var columnChange = getWidthsForPreset(presetLayout).length - numCols;
   if (columnChange > 0) {
-    increaseColumns(state.schema, insideRightEdgeOfLayoutSection, columnChange, formatMessage)(tr);
+    increaseColumns(state.schema, insideRightEdgeOfLayoutSection, columnChange)(tr);
   } else if (columnChange < 0) {
     decreaseColumns(node, insideRightEdgeOfLayoutSection, -columnChange)(tr);
   }
@@ -335,9 +313,9 @@ 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, formatMessage) {
+export function forceSectionToPresetLayout(state, node, pos, presetLayout) {
   var forceColumnStructureFn = isPreRelease2() ? forceColumnStructureNew : forceColumnStructure;
-  var tr = forceColumnStructureFn(state, node, pos, presetLayout, formatMessage);
+  var tr = forceColumnStructureFn(state, node, pos, presetLayout);
 
   // save the selection here, since forcing column widths causes a change over the
   // entire layoutSection, which remaps selection to the end. not remapping here
@@ -348,7 +326,7 @@ export function forceSectionToPresetLayout(state, node, pos, presetLayout, forma
   return tr.setSelection(state.selection instanceof NodeSelection ? new NodeSelection(selectionPos$) : new TextSelection(selectionPos$));
 }
 export var setPresetLayout = function setPresetLayout(editorAnalyticsAPI) {
-  return function (layout, formatMessage) {
+  return function (layout) {
     return function (state, dispatch) {
       var _ref = pluginKey.getState(state),
         pos = _ref.pos,
@@ -360,7 +338,7 @@ export var setPresetLayout = function setPresetLayout(editorAnalyticsAPI) {
       if (!node) {
         return false;
       }
-      var tr = forceSectionToPresetLayout(state, node, pos, layout, formatMessage);
+      var tr = forceSectionToPresetLayout(state, node, pos, layout);
       if (tr) {
         editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
           action: ACTION.CHANGED_LAYOUT,

package/dist/esm/plugin.js

@@ -75,7 +75,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
             return /*#__PURE__*/React.createElement(IconTwoColumnLayout, null);
           },
           action: function action(insert, state) {
-            var tr = insert(createMultiColumnLayoutSection(state, 2, formatMessage));
+            var tr = insert(createMultiColumnLayoutSection(state, 2));
             return tr;
           }
         }, {
@@ -88,7 +88,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
             return /*#__PURE__*/React.createElement(IconThreeColumnLayout, null);
           },
           action: function action(insert, state) {
-            var tr = insert(createMultiColumnLayoutSection(state, 3, formatMessage));
+            var tr = insert(createMultiColumnLayoutSection(state, 3));
             return tr;
           }
         }, {
@@ -101,7 +101,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
             return /*#__PURE__*/React.createElement(IconFourColumnLayout, null);
           },
           action: function action(insert, state) {
-            var tr = insert(createMultiColumnLayoutSection(state, 4, formatMessage));
+            var tr = insert(createMultiColumnLayoutSection(state, 4));
             return tr;
           }
         }, {
@@ -114,7 +114,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
             return /*#__PURE__*/React.createElement(IconFiveColumnLayout, null);
           },
           action: function action(insert, state) {
-            var tr = insert(createMultiColumnLayoutSection(state, 5, formatMessage));
+            var tr = insert(createMultiColumnLayoutSection(state, 5));
             return tr;
           }
         }] : [{

package/dist/esm/toolbar.js

@@ -113,7 +113,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, intl.formatMessage),
+    onClick: setPresetLayout(editorAnalyticsAPI)(item.type),
     selected: !!currentLayout && currentLayout === item.type,
     tabIndex: null
   };
@@ -139,7 +139,7 @@ var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
     }),
     //'2-columns',
     icon: iconPlaceholder,
-    onClick: setPresetLayout(editorAnalyticsAPI)('two_equal', intl.formatMessage),
+    onClick: setPresetLayout(editorAnalyticsAPI)('two_equal'),
     selected: numberOfColumns === 2
   }, {
     title: intl.formatMessage(layoutMessages.columnOption, {
@@ -147,7 +147,7 @@ var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
     }),
     //'3-columns'
     icon: iconPlaceholder,
-    onClick: setPresetLayout(editorAnalyticsAPI)('three_equal', intl.formatMessage),
+    onClick: setPresetLayout(editorAnalyticsAPI)('three_equal'),
     selected: numberOfColumns === 3
   }, {
     title: intl.formatMessage(layoutMessages.columnOption, {
@@ -155,7 +155,7 @@ var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
     }),
     //'4-columns'
     icon: iconPlaceholder,
-    onClick: setPresetLayout(editorAnalyticsAPI)('four_equal', intl.formatMessage),
+    onClick: setPresetLayout(editorAnalyticsAPI)('four_equal'),
     selected: numberOfColumns === 4
   }, {
     title: intl.formatMessage(layoutMessages.columnOption, {
@@ -163,7 +163,7 @@ var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
     }),
     //'5-columns'
     icon: iconPlaceholder,
-    onClick: setPresetLayout(editorAnalyticsAPI)('five_equal', intl.formatMessage),
+    onClick: setPresetLayout(editorAnalyticsAPI)('five_equal'),
     selected: numberOfColumns === 5
   }];
   return [{

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

@@ -2,21 +2,36 @@
  * @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 { useMemo } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled
 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'
+import { useIntl } from 'react-intl-next';
+import { layoutMessages as messages } from '@atlaskit/editor-common/messages';
+var getPlaceholderStyle = function getPlaceholderStyle(message) {
+  return css({
+    // when paragraph is the only child, and it only has a trailingBreak.
+    // 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] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+      '&::before': {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+        content: "\"".concat(message, "\""),
+        position: 'absolute',
+        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)",
+        marginTop: "var(--ds-space-050, 4px)"
+      }
     }
-  }
-});
+  });
+};
 export var GlobalStylesWrapper = function GlobalStylesWrapper() {
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var placeholderStyle = useMemo(function () {
+    return getPlaceholderStyle(formatMessage(messages.layoutPlaceholder));
+  }, [formatMessage]);
   return jsx(Global, {
-    styles: globalStyles
+    styles: placeholderStyle
   });
 };

package/dist/types/actions.d.ts

@@ -1,4 +1,3 @@
-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';
@@ -13,12 +12,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, formatMessage: IntlShape['formatMessage']) => Node;
-export declare const createDefaultLayoutSection: (state: EditorState, formatMessage?: IntlShape['formatMessage']) => Node;
+export declare const createMultiColumnLayoutSection: (state: EditorState, numberOfColumns?: number) => Node;
+export declare const createDefaultLayoutSection: (state: EditorState) => Node;
 export declare const insertLayoutColumns: 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 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 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

@@ -1,6 +1,2 @@
-/**
- * @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,4 +1,3 @@
-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';
@@ -13,12 +12,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, formatMessage: IntlShape['formatMessage']) => Node;
-export declare const createDefaultLayoutSection: (state: EditorState, formatMessage?: IntlShape['formatMessage']) => Node;
+export declare const createMultiColumnLayoutSection: (state: EditorState, numberOfColumns?: number) => Node;
+export declare const createDefaultLayoutSection: (state: EditorState) => Node;
 export declare const insertLayoutColumns: 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 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 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

@@ -1,6 +1,2 @@
-/**
- * @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.12.7",
+	"version": "1.12.8",
 	"description": "Layout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,7 +32,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^46.1.0",
-		"@atlaskit/editor-common": "^95.7.0",
+		"@atlaskit/editor-common": "^95.8.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
 		"@atlaskit/editor-plugin-decorations": "^1.3.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",