@atlaskit/editor-plugin-layout 2.1.5 → 2.2.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-layout
 
+## 2.2.1
+
+### Patch Changes
+
+- [#127914](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/127914)
+  [`1240912e13dd0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1240912e13dd0) -
+  [ux] ED-27097 Hide layout placeholder when editor is not focussed
+- Updated dependencies
+
+## 2.2.0
+
+### Minor Changes
+
+- [#115815](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/115815)
+  [`ad7c517ed3b47`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ad7c517ed3b47) -
+  ED-26661 add option enables single column layout
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.1.5
 
 ### Patch Changes

package/dist/cjs/layoutPlugin.js

@@ -23,6 +23,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
   var _ref$config = _ref.config,
     options = _ref$config === void 0 ? {} : _ref$config,
     api = _ref.api;
+  var allowAdvancedSingleColumnLayout = (0, _experiments.editorExperiment)('advanced_layouts', true) && (0, _experiments.editorExperiment)('single_column_layouts', true);
   return {
     name: 'layout',
     nodes: function nodes() {
@@ -64,7 +65,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
           addSidebarLayouts = _ref3.addSidebarLayouts,
           allowSingleColumnLayout = _ref3.allowSingleColumnLayout;
         if (pos !== null) {
-          return (0, _toolbar.buildToolbar)(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api);
+          return (0, _toolbar.buildToolbar)(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout, allowAdvancedSingleColumnLayout, api);
         }
         return undefined;
       },
@@ -83,6 +84,21 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
           })(tr);
           return tr;
         };
+        var advancedSingleColumnOption = allowAdvancedSingleColumnLayout ? [{
+          id: 'onecolumnlayout',
+          title: formatMessage(_messages.layoutMessages.singleColumnAdvancedLayout),
+          description: formatMessage(_messages.toolbarInsertBlockMessages.singleColumnsDescriptionAdvancedLayout),
+          keywords: ['layout', 'column', 'section', 'single column'],
+          priority: 1100,
+          icon: function icon() {
+            return /*#__PURE__*/_react.default.createElement(_quickInsert.IconOneColumnLayout, null);
+          },
+          action: function action(insert, state, _source) {
+            var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 1));
+            withInsertLayoutAnalytics(tr);
+            return tr;
+          }
+        }] : [];
         if ((0, _experiments.editorExperiment)('advanced_layouts', true)) {
           if ((0, _experiments.editorExperiment)('platform_editor_insertion', 'variant1')) {
             return [{
@@ -103,7 +119,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
               }
             }];
           } else {
-            return [{
+            return [].concat(advancedSingleColumnOption, [{
               id: 'twocolumnslayout',
               title: formatMessage(_messages.layoutMessages.twoColumnsAdvancedLayout),
               description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescriptionAdvancedLayout, {
@@ -167,7 +183,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
                 withInsertLayoutAnalytics(tr);
                 return tr;
               }
-            }];
+            }]);
           }
         } else {
           return [{

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

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GlobalStylesWrapper = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
@@ -16,22 +18,19 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled
 
+var PLACEHOLDER_SELECTOR = '.ProseMirror-focused .layoutSectionView-content-wrap.selected [data-layout-column] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)';
 var getPlaceholderStyle = function getPlaceholderStyle(message) {
   if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
-    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 .layoutSectionView-content-wrap.selected [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-subtlest, #626F86)",
-          pointerEvents: 'none'
-        }
+    return (0, _react2.css)((0, _defineProperty2.default)({}, "".concat(PLACEHOLDER_SELECTOR), {
+      // 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-subtlest, #626F86)",
+        pointerEvents: 'none'
       }
-    });
+    }));
   }
   return (0, _react2.css)({
     // when paragraph is the only child, and it only has a trailingBreak.

package/dist/cjs/ui/toolbar.js

@@ -141,7 +141,8 @@ var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
     nodeType = _ref.nodeType,
     separator = _ref.separator,
     deleteButton = _ref.deleteButton,
-    currentLayout = _ref.currentLayout;
+    currentLayout = _ref.currentLayout,
+    allowAdvancedSingleColumnLayout = _ref.allowAdvancedSingleColumnLayout;
   var numberOfColumns = node.content.childCount || 2;
   var distributionOptions = numberOfColumns === 2 ? LAYOUT_WITH_TWO_COL_DISTRIBUTION : numberOfColumns === 3 ? LAYOUT_WITH_THREE_COL_DISTRIBUTION : [];
   var columnOptions = [{
@@ -177,13 +178,22 @@ var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
     onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('five_equal'),
     selected: numberOfColumns === 5
   }];
+  var singleColumnOption = allowAdvancedSingleColumnLayout ? {
+    title: intl.formatMessage(_messages.layoutMessages.columnOption, {
+      count: 1
+    }),
+    //'1-columns',
+    icon: iconPlaceholder,
+    onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('single'),
+    selected: numberOfColumns === 1
+  } : [];
   return [{
     type: 'dropdown',
     title: intl.formatMessage(_messages.layoutMessages.columnOption, {
       count: numberOfColumns
     }),
     //`${numberOfColumns}-columns`,
-    options: columnOptions,
+    options: [singleColumnOption, columnOptions].flat(),
     showSelected: true,
     testId: 'column-options-button'
   }].concat((0, _toConsumableArray2.default)(distributionOptions.length > 0 ? [separator] : []), (0, _toConsumableArray2.default)(addSidebarLayouts ? distributionOptions.map(function (i) {
@@ -194,7 +204,7 @@ var fullHeightSeparator = {
   type: 'separator',
   fullHeight: true
 };
-var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api) {
+var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout, addSidebarLayouts, allowSingleColumnLayout, allowAdvancedSingleColumnLayout, api) {
   var _api$decorations$acti, _api$decorations, _api$analytics;
   var _ref2 = (_api$decorations$acti = api === null || api === void 0 || (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions) !== null && _api$decorations$acti !== void 0 ? _api$decorations$acti : {},
     hoverDecoration = _ref2.hoverDecoration;
@@ -270,7 +280,8 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos
         node: node,
         separator: separator,
         deleteButton: deleteButton,
-        currentLayout: currentLayout
+        currentLayout: currentLayout,
+        allowAdvancedSingleColumnLayout: allowAdvancedSingleColumnLayout
       }) : [].concat((0, _toConsumableArray2.default)(layoutTypes.map(function (i) {
         return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
       })), (0, _toConsumableArray2.default)(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(function (i) {

package/dist/es2019/layoutPlugin.js

@@ -3,7 +3,7 @@ import { layoutColumn, layoutSection } from '@atlaskit/adf-schema';
 import { layoutSectionWithSingleColumn } from '@atlaskit/adf-schema/schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { layoutMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
-import { IconFiveColumnLayout, IconFourColumnLayout, IconLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/quick-insert';
+import { IconFiveColumnLayout, IconFourColumnLayout, IconLayout, IconOneColumnLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/quick-insert';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayoutColumnsWithAnalytics } from './pm-plugins/actions';
 import { default as createLayoutPlugin } from './pm-plugins/main';
@@ -16,6 +16,7 @@ export const layoutPlugin = ({
   api
 }) => {
   var _api$analytics;
+  const allowAdvancedSingleColumnLayout = editorExperiment('advanced_layouts', true) && editorExperiment('single_column_layouts', true);
   return {
     name: 'layout',
     nodes() {
@@ -55,7 +56,7 @@ export const layoutPlugin = ({
           allowSingleColumnLayout
         } = pluginKey.getState(state);
         if (pos !== null) {
-          return buildToolbar(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api);
+          return buildToolbar(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout, allowAdvancedSingleColumnLayout, api);
         }
         return undefined;
       },
@@ -75,6 +76,19 @@ export const layoutPlugin = ({
           })(tr);
           return tr;
         };
+        const advancedSingleColumnOption = allowAdvancedSingleColumnLayout ? [{
+          id: 'onecolumnlayout',
+          title: formatMessage(layoutMessages.singleColumnAdvancedLayout),
+          description: formatMessage(messages.singleColumnsDescriptionAdvancedLayout),
+          keywords: ['layout', 'column', 'section', 'single column'],
+          priority: 1100,
+          icon: () => /*#__PURE__*/React.createElement(IconOneColumnLayout, null),
+          action(insert, state, _source) {
+            const tr = insert(createMultiColumnLayoutSection(state, 1));
+            withInsertLayoutAnalytics(tr);
+            return tr;
+          }
+        }] : [];
         if (editorExperiment('advanced_layouts', true)) {
           if (editorExperiment('platform_editor_insertion', 'variant1')) {
             return [{
@@ -93,7 +107,7 @@ export const layoutPlugin = ({
               }
             }];
           } else {
-            return [{
+            return [...advancedSingleColumnOption, {
               id: 'twocolumnslayout',
               title: formatMessage(layoutMessages.twoColumnsAdvancedLayout),
               description: formatMessage(messages.columnsDescriptionAdvancedLayout, {

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

@@ -9,12 +9,13 @@ import { css, Global, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import { layoutMessages as messages } from '@atlaskit/editor-common/messages';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+const PLACEHOLDER_SELECTOR = '.ProseMirror-focused .layoutSectionView-content-wrap.selected [data-layout-column] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)';
 const getPlaceholderStyle = message => {
   if (editorExperiment('platform_editor_controls', 'variant1')) {
     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 .layoutSectionView-content-wrap.selected [data-layout-column] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+      [`${PLACEHOLDER_SELECTOR}`]: {
         // 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

package/dist/es2019/ui/toolbar.js

@@ -128,7 +128,8 @@ const getAdvancedLayoutItems = ({
   nodeType,
   separator,
   deleteButton,
-  currentLayout
+  currentLayout,
+  allowAdvancedSingleColumnLayout
 }) => {
   const numberOfColumns = node.content.childCount || 2;
   const distributionOptions = numberOfColumns === 2 ? LAYOUT_WITH_TWO_COL_DISTRIBUTION : numberOfColumns === 3 ? LAYOUT_WITH_THREE_COL_DISTRIBUTION : [];
@@ -165,13 +166,22 @@ const getAdvancedLayoutItems = ({
     onClick: setPresetLayout(editorAnalyticsAPI)('five_equal'),
     selected: numberOfColumns === 5
   }];
+  const singleColumnOption = allowAdvancedSingleColumnLayout ? {
+    title: intl.formatMessage(layoutMessages.columnOption, {
+      count: 1
+    }),
+    //'1-columns',
+    icon: iconPlaceholder,
+    onClick: setPresetLayout(editorAnalyticsAPI)('single'),
+    selected: numberOfColumns === 1
+  } : [];
   return [{
     type: 'dropdown',
     title: intl.formatMessage(layoutMessages.columnOption, {
       count: numberOfColumns
     }),
     //`${numberOfColumns}-columns`,
-    options: columnOptions,
+    options: [singleColumnOption, columnOptions].flat(),
     showSelected: true,
     testId: 'column-options-button'
   }, ...(distributionOptions.length > 0 ? [separator] : []), ...(addSidebarLayouts ? distributionOptions.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)) : [])];
@@ -180,7 +190,7 @@ const fullHeightSeparator = {
   type: 'separator',
   fullHeight: true
 };
-export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api) => {
+export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts, allowSingleColumnLayout, allowAdvancedSingleColumnLayout, api) => {
   var _api$decorations$acti, _api$decorations, _api$analytics;
   const {
     hoverDecoration
@@ -255,7 +265,8 @@ export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts
         node,
         separator,
         deleteButton,
-        currentLayout
+        currentLayout,
+        allowAdvancedSingleColumnLayout
       }) : [...layoutTypes.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)), ...(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)) : [])]), ...(editorExperiment('platform_editor_controls', 'variant1') ? [fullHeightSeparator, overflowMenu] : [separator, copyButton, separator, deleteButton])],
       scrollable: true
     };

package/dist/esm/layoutPlugin.js

@@ -3,7 +3,7 @@ import { layoutColumn, layoutSection } from '@atlaskit/adf-schema';
 import { layoutSectionWithSingleColumn } from '@atlaskit/adf-schema/schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { layoutMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
-import { IconFiveColumnLayout, IconFourColumnLayout, IconLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/quick-insert';
+import { IconFiveColumnLayout, IconFourColumnLayout, IconLayout, IconOneColumnLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/quick-insert';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayoutColumnsWithAnalytics } from './pm-plugins/actions';
 import { default as createLayoutPlugin } from './pm-plugins/main';
@@ -16,6 +16,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
   var _ref$config = _ref.config,
     options = _ref$config === void 0 ? {} : _ref$config,
     api = _ref.api;
+  var allowAdvancedSingleColumnLayout = editorExperiment('advanced_layouts', true) && editorExperiment('single_column_layouts', true);
   return {
     name: 'layout',
     nodes: function nodes() {
@@ -57,7 +58,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
           addSidebarLayouts = _ref3.addSidebarLayouts,
           allowSingleColumnLayout = _ref3.allowSingleColumnLayout;
         if (pos !== null) {
-          return buildToolbar(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api);
+          return buildToolbar(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout, allowAdvancedSingleColumnLayout, api);
         }
         return undefined;
       },
@@ -76,6 +77,21 @@ export var layoutPlugin = function layoutPlugin(_ref) {
           })(tr);
           return tr;
         };
+        var advancedSingleColumnOption = allowAdvancedSingleColumnLayout ? [{
+          id: 'onecolumnlayout',
+          title: formatMessage(layoutMessages.singleColumnAdvancedLayout),
+          description: formatMessage(messages.singleColumnsDescriptionAdvancedLayout),
+          keywords: ['layout', 'column', 'section', 'single column'],
+          priority: 1100,
+          icon: function icon() {
+            return /*#__PURE__*/React.createElement(IconOneColumnLayout, null);
+          },
+          action: function action(insert, state, _source) {
+            var tr = insert(createMultiColumnLayoutSection(state, 1));
+            withInsertLayoutAnalytics(tr);
+            return tr;
+          }
+        }] : [];
         if (editorExperiment('advanced_layouts', true)) {
           if (editorExperiment('platform_editor_insertion', 'variant1')) {
             return [{
@@ -96,7 +112,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
               }
             }];
           } else {
-            return [{
+            return [].concat(advancedSingleColumnOption, [{
               id: 'twocolumnslayout',
               title: formatMessage(layoutMessages.twoColumnsAdvancedLayout),
               description: formatMessage(messages.columnsDescriptionAdvancedLayout, {
@@ -160,7 +176,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
                 withInsertLayoutAnalytics(tr);
                 return tr;
               }
-            }];
+            }]);
           }
         } else {
           return [{

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

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -9,22 +10,19 @@ import { css, Global, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import { layoutMessages as messages } from '@atlaskit/editor-common/messages';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+var PLACEHOLDER_SELECTOR = '.ProseMirror-focused .layoutSectionView-content-wrap.selected [data-layout-column] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)';
 var getPlaceholderStyle = function getPlaceholderStyle(message) {
   if (editorExperiment('platform_editor_controls', 'variant1')) {
-    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 .layoutSectionView-content-wrap.selected [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-subtlest, #626F86)",
-          pointerEvents: 'none'
-        }
+    return css(_defineProperty({}, "".concat(PLACEHOLDER_SELECTOR), {
+      // 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-subtlest, #626F86)",
+        pointerEvents: 'none'
       }
-    });
+    }));
   }
   return css({
     // when paragraph is the only child, and it only has a trailingBreak.

package/dist/esm/ui/toolbar.js

@@ -131,7 +131,8 @@ var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
     nodeType = _ref.nodeType,
     separator = _ref.separator,
     deleteButton = _ref.deleteButton,
-    currentLayout = _ref.currentLayout;
+    currentLayout = _ref.currentLayout,
+    allowAdvancedSingleColumnLayout = _ref.allowAdvancedSingleColumnLayout;
   var numberOfColumns = node.content.childCount || 2;
   var distributionOptions = numberOfColumns === 2 ? LAYOUT_WITH_TWO_COL_DISTRIBUTION : numberOfColumns === 3 ? LAYOUT_WITH_THREE_COL_DISTRIBUTION : [];
   var columnOptions = [{
@@ -167,13 +168,22 @@ var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
     onClick: setPresetLayout(editorAnalyticsAPI)('five_equal'),
     selected: numberOfColumns === 5
   }];
+  var singleColumnOption = allowAdvancedSingleColumnLayout ? {
+    title: intl.formatMessage(layoutMessages.columnOption, {
+      count: 1
+    }),
+    //'1-columns',
+    icon: iconPlaceholder,
+    onClick: setPresetLayout(editorAnalyticsAPI)('single'),
+    selected: numberOfColumns === 1
+  } : [];
   return [{
     type: 'dropdown',
     title: intl.formatMessage(layoutMessages.columnOption, {
       count: numberOfColumns
     }),
     //`${numberOfColumns}-columns`,
-    options: columnOptions,
+    options: [singleColumnOption, columnOptions].flat(),
     showSelected: true,
     testId: 'column-options-button'
   }].concat(_toConsumableArray(distributionOptions.length > 0 ? [separator] : []), _toConsumableArray(addSidebarLayouts ? distributionOptions.map(function (i) {
@@ -184,7 +194,7 @@ var fullHeightSeparator = {
   type: 'separator',
   fullHeight: true
 };
-export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api) {
+export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout, addSidebarLayouts, allowSingleColumnLayout, allowAdvancedSingleColumnLayout, api) {
   var _api$decorations$acti, _api$decorations, _api$analytics;
   var _ref2 = (_api$decorations$acti = api === null || api === void 0 || (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions) !== null && _api$decorations$acti !== void 0 ? _api$decorations$acti : {},
     hoverDecoration = _ref2.hoverDecoration;
@@ -260,7 +270,8 @@ export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout
         node: node,
         separator: separator,
         deleteButton: deleteButton,
-        currentLayout: currentLayout
+        currentLayout: currentLayout,
+        allowAdvancedSingleColumnLayout: allowAdvancedSingleColumnLayout
       }) : [].concat(_toConsumableArray(layoutTypes.map(function (i) {
         return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
       })), _toConsumableArray(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(function (i) {

package/dist/types/types/index.d.ts

@@ -3,6 +3,11 @@ import type { Slice } from '@atlaskit/editor-prosemirror/model';
 export interface LayoutPluginOptions extends LongPressSelectionPluginOptions {
     allowBreakout?: boolean;
     UNSAFE_addSidebarLayouts?: boolean;
+    /**
+     * @private
+     * @deprecated
+     * @see https://product-fabric.atlassian.net/browse/ED-26662
+     */
     UNSAFE_allowSingleColumnLayout?: boolean;
     editorAppearance?: EditorAppearance;
 }

package/dist/types/ui/toolbar.d.ts

@@ -3,4 +3,4 @@ import type { ExtractInjectionAPI, FloatingToolbarConfig } from '@atlaskit/edito
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { LayoutPlugin } from '../index';
 export declare const layoutToolbarTitle = "Layout floating controls";
-export declare const buildToolbar: (state: EditorState, intl: IntlShape, pos: number, _allowBreakout: boolean, addSidebarLayouts: boolean, allowSingleColumnLayout: boolean, api: ExtractInjectionAPI<LayoutPlugin> | undefined) => FloatingToolbarConfig | undefined;
+export declare const buildToolbar: (state: EditorState, intl: IntlShape, pos: number, _allowBreakout: boolean, addSidebarLayouts: boolean, allowSingleColumnLayout: boolean, allowAdvancedSingleColumnLayout: boolean, api: ExtractInjectionAPI<LayoutPlugin> | undefined) => FloatingToolbarConfig | undefined;

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

@@ -3,6 +3,11 @@ import type { Slice } from '@atlaskit/editor-prosemirror/model';
 export interface LayoutPluginOptions extends LongPressSelectionPluginOptions {
     allowBreakout?: boolean;
     UNSAFE_addSidebarLayouts?: boolean;
+    /**
+     * @private
+     * @deprecated
+     * @see https://product-fabric.atlassian.net/browse/ED-26662
+     */
     UNSAFE_allowSingleColumnLayout?: boolean;
     editorAppearance?: EditorAppearance;
 }

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

@@ -3,4 +3,4 @@ import type { ExtractInjectionAPI, FloatingToolbarConfig } from '@atlaskit/edito
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { LayoutPlugin } from '../index';
 export declare const layoutToolbarTitle = "Layout floating controls";
-export declare const buildToolbar: (state: EditorState, intl: IntlShape, pos: number, _allowBreakout: boolean, addSidebarLayouts: boolean, allowSingleColumnLayout: boolean, api: ExtractInjectionAPI<LayoutPlugin> | undefined) => FloatingToolbarConfig | undefined;
+export declare const buildToolbar: (state: EditorState, intl: IntlShape, pos: number, _allowBreakout: boolean, addSidebarLayouts: boolean, allowSingleColumnLayout: boolean, allowAdvancedSingleColumnLayout: boolean, api: ExtractInjectionAPI<LayoutPlugin> | undefined) => FloatingToolbarConfig | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-layout",
-	"version": "2.1.5",
+	"version": "2.2.1",
 	"description": "Layout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,7 +34,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^102.8.0",
+		"@atlaskit/editor-common": "^102.10.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-decorations": "^2.0.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
@@ -43,7 +43,7 @@
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/icon": "^25.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^4.0.0",
+		"@atlaskit/tmp-editor-statsig": "^4.1.0",
 		"@atlaskit/tokens": "^4.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"