@atlaskit/editor-plugin-layout 1.12.7 → 1.12.9

package/dist/es2019/{actions.js → pm-plugins/actions.js}

@@ -1,13 +1,12 @@
 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 { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { EVEN_DISTRIBUTED_COL_WIDTHS } from './consts';
-import { pluginKey } from './pm-plugins/plugin-key';
+import { pluginKey } from './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'];
@@ -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/pm-plugins/main.js

@@ -5,9 +5,9 @@ import { keydownHandler } from '@atlaskit/editor-prosemirror/keymap';
 import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { fixColumnSizes, fixColumnStructure, getSelectedLayout } from '../actions';
-import { getMaybeLayoutSection } from '../utils';
+import { fixColumnSizes, fixColumnStructure, getSelectedLayout } from './actions';
 import { pluginKey } from './plugin-key';
+import { getMaybeLayoutSection } from './utils';
 export const DEFAULT_LAYOUT = 'two_equal';
 const isWholeSelectionInsideLayoutColumn = state => {
   // Since findParentNodeOfType doesn't check if selection.to shares the parent, we do this check ourselves

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

@@ -1,6 +1,6 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { LayoutSectionView } from '../node-views';
+import { LayoutSectionView } from '../nodeviews';
 export const pluginKey = new PluginKey('layoutResizingPlugin');
 export default ((options, pluginInjectionApi, portalProviderAPI, eventDispatcher) => new SafePlugin({
   key: pluginKey,

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

@@ -15,10 +15,10 @@ import LayoutTwoLeftSidebarIcon from '@atlaskit/icon/glyph/editor/layout-two-lef
 import LayoutTwoRightSidebarIcon from '@atlaskit/icon/glyph/editor/layout-two-right-sidebar';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { deleteActiveLayoutNode, getPresetLayout, setPresetLayout } from './actions';
-import { LayoutThreeWithLeftSidebarsIcon } from './ui/icons/LayoutThreeWithLeftSidebars';
-import { LayoutThreeWithRightSidebarsIcon } from './ui/icons/LayoutThreeWithRightSidebars';
-import { isPreRelease2 } from './utils/preRelease';
+import { deleteActiveLayoutNode, getPresetLayout, setPresetLayout } from '../pm-plugins/actions';
+import { isPreRelease2 } from '../pm-plugins/utils/preRelease';
+import { LayoutThreeWithLeftSidebarsIcon } from './icons/LayoutThreeWithLeftSidebars';
+import { LayoutThreeWithRightSidebarsIcon } from './icons/LayoutThreeWithRightSidebars';
 const LAYOUT_TYPES = [{
   id: 'editor.layout.twoEquals',
   type: 'two_equal',
@@ -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/esm/index.js

@@ -1 +1 @@
-export { layoutPlugin } from './plugin';
+export { layoutPlugin } from './layoutPlugin';

package/dist/esm/{plugin.js → layoutPlugin.js}

@@ -5,13 +5,13 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } f
 import { layoutMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconFiveColumnLayout, IconFourColumnLayout, IconLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/quick-insert';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayoutColumnsWithAnalytics } from './actions';
+import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayoutColumnsWithAnalytics } from './pm-plugins/actions';
 import { default as createLayoutPlugin } from './pm-plugins/main';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { default as createLayoutResizingPlugin } from './pm-plugins/resizing';
-import { buildToolbar } from './toolbar';
+import { isPreRelease2 } from './pm-plugins/utils/preRelease';
 import { GlobalStylesWrapper } from './ui/global-styles';
-import { isPreRelease2 } from './utils/preRelease';
+import { buildToolbar } from './ui/toolbar';
 export { pluginKey };
 export var layoutPlugin = function layoutPlugin(_ref) {
   var _api$analytics;
@@ -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/layoutPluginType.js

@@ -0,0 +1,2 @@
+import { pluginKey } from './pm-plugins/plugin-key';
+export { pluginKey };

package/dist/esm/{actions.js → pm-plugins/actions.js}

@@ -3,14 +3,13 @@ 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 { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { EVEN_DISTRIBUTED_COL_WIDTHS } from './consts';
-import { pluginKey } from './pm-plugins/plugin-key';
+import { pluginKey } from './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'];
@@ -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/pm-plugins/main.js

@@ -8,9 +8,9 @@ import { keydownHandler } from '@atlaskit/editor-prosemirror/keymap';
 import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { fixColumnSizes, fixColumnStructure, getSelectedLayout } from '../actions';
-import { getMaybeLayoutSection } from '../utils';
+import { fixColumnSizes, fixColumnStructure, getSelectedLayout } from './actions';
 import { pluginKey } from './plugin-key';
+import { getMaybeLayoutSection } from './utils';
 export var DEFAULT_LAYOUT = 'two_equal';
 var isWholeSelectionInsideLayoutColumn = function isWholeSelectionInsideLayoutColumn(state) {
   // Since findParentNodeOfType doesn't check if selection.to shares the parent, we do this check ourselves

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

@@ -1,6 +1,6 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { LayoutSectionView } from '../node-views';
+import { LayoutSectionView } from '../nodeviews';
 export var pluginKey = new PluginKey('layoutResizingPlugin');
 export default (function (options, pluginInjectionApi, portalProviderAPI, eventDispatcher) {
   return new SafePlugin({

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
   });
 };