@atlaskit/editor-plugin-layout 1.12.13 → 1.12.14

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-layout
 
+## 1.12.14
+
+### Patch Changes
+
+- [#176299](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/176299)
+  [`798c7904ad3ff`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/798c7904ad3ff) -
+  ED-25926 improve placeholder and seperator apperance
+- Updated dependencies
+
 ## 1.12.13
 
 ### Patch Changes

package/dist/cjs/nodeviews/index.js

@@ -1,22 +1,47 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.LayoutSectionView = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _react = _interopRequireDefault(require("react"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
 var _resizer = require("@atlaskit/editor-common/resizer");
 var _model = require("@atlaskit/editor-prosemirror/model");
-function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var isEmptyParagraph = function isEmptyParagraph(node) {
+  return !!node && node.type.name === 'paragraph' && !node.childCount;
+};
+var isEmptyLayout = function isEmptyLayout(node) {
+  if (!node) {
+    return false;
+  }
+  // fast check
+  // each column should have size 2 from layoutcolumn and 2 from empty paragraph
+  if (node.content.size / node.childCount !== 4) {
+    return false;
+  }
+  var isEmpty = true;
+  node.content.forEach(function (maybelayoutColumn) {
+    if (maybelayoutColumn.type.name !== 'layoutColumn' || maybelayoutColumn.childCount > 1 || !isEmptyParagraph(maybelayoutColumn.firstChild)) {
+      isEmpty = false;
+      return;
+    }
+  });
+  return isEmpty;
+};
 var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
   var _pluginInjectionApi$a;
   var pluginInjectionApi = _ref.pluginInjectionApi,
@@ -30,6 +55,10 @@ var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
     var _pluginInjectionApi$w;
     return pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.currentState();
   };
+  var displayGapCursor = (0, _react.useCallback)(function (toggle) {
+    var _pluginInjectionApi$c, _pluginInjectionApi$c2, _pluginInjectionApi$s;
+    return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$s = pluginInjectionApi.selection) === null || _pluginInjectionApi$s === void 0 ? void 0 : _pluginInjectionApi$s.commands.displayGapCursor(toggle))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
+  }, [pluginInjectionApi]);
   return /*#__PURE__*/_react.default.createElement(_resizer.BreakoutResizer, {
     getRef: forwardRef,
     getPos: getPos,
@@ -38,7 +67,8 @@ var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
     getEditorWidth: getEditorWidth,
     disabled: (editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled) === true,
     parentRef: parentRef,
-    editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions
+    editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions,
+    displayGapCursor: displayGapCursor
   });
 };
 var toDOM = function toDOM() {
@@ -49,16 +79,18 @@ var toDOM = function toDOM() {
   }, 0]];
 };
 var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
-  (0, _inherits2.default)(LayoutSectionView, _ReactNodeView);
-  var _super = _createSuper(LayoutSectionView);
   function LayoutSectionView(props) {
     var _this;
     (0, _classCallCheck2.default)(this, LayoutSectionView);
-    _this = _super.call(this, props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
+    _this = _callSuper(this, LayoutSectionView, [props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props]);
+    if ((0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_1')) {
+      _this.isEmpty = isEmptyLayout(_this.node);
+    }
     _this.options = props.options;
     return _this;
   }
-  (0, _createClass2.default)(LayoutSectionView, [{
+  (0, _inherits2.default)(LayoutSectionView, _ReactNodeView);
+  return (0, _createClass2.default)(LayoutSectionView, [{
     key: "getContentDOM",
     value: function getContentDOM() {
       var _ref2 = _model.DOMSerializer.renderSpec(document, toDOM()),
@@ -66,6 +98,9 @@ var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_Reac
         contentDOM = _ref2.contentDOM;
       this.layoutDOM = container.querySelector('[data-layout-section]');
       this.layoutDOM.setAttribute('data-column-rule-style', this.node.attrs.columnRuleStyle);
+      if ((0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_1')) {
+        this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
+      }
       return {
         dom: container,
         contentDOM: contentDOM
@@ -81,6 +116,12 @@ var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_Reac
   }, {
     key: "render",
     value: function render(props, forwardRef) {
+      if ((0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_1')) {
+        this.isEmpty = isEmptyLayout(this.node);
+        if (this.layoutDOM) {
+          this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
+        }
+      }
       return /*#__PURE__*/_react.default.createElement(LayoutBreakoutResizer, {
         pluginInjectionApi: props.pluginInjectionApi,
         forwardRef: forwardRef,
@@ -95,5 +136,4 @@ var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_Reac
       return (0, _resizer.ignoreResizerMutations)(mutation);
     }
   }]);
-  return LayoutSectionView;
 }(_reactNodeView.default);

package/dist/cjs/pm-plugins/actions.js

@@ -14,6 +14,7 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _consts = require("./consts");
 var _pluginKey = require("./plugin-key");
@@ -382,7 +383,9 @@ function layoutNeedChanges(node) {
 var getDefaultPresetLayout = function getDefaultPresetLayout(layoutNode) {
   var layoutColumnCount = layoutNode.childCount;
   if (layoutColumnCount <= 1) {
-    return 'single';
+    // This prevents the creation of a single column layout
+    // once we support single column layout, we can return 'single'
+    return (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_1') ? 'two_equal' : 'single';
   }
   switch (layoutColumnCount) {
     case 2:

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

@@ -8,6 +8,7 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -16,6 +17,23 @@ var _messages = require("@atlaskit/editor-common/messages");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled
 
 var getPlaceholderStyle = function getPlaceholderStyle(message) {
+  if ((0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_1')) {
+    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-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)"
+        }
+      }
+    });
+  }
   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

package/dist/es2019/nodeviews/index.js

@@ -1,8 +1,30 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { BreakoutResizer, ignoreResizerMutations } from '@atlaskit/editor-common/resizer';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { fg } from '@atlaskit/platform-feature-flags';
+const isEmptyParagraph = node => {
+  return !!node && node.type.name === 'paragraph' && !node.childCount;
+};
+const isEmptyLayout = node => {
+  if (!node) {
+    return false;
+  }
+  // fast check
+  // each column should have size 2 from layoutcolumn and 2 from empty paragraph
+  if (node.content.size / node.childCount !== 4) {
+    return false;
+  }
+  let isEmpty = true;
+  node.content.forEach(maybelayoutColumn => {
+    if (maybelayoutColumn.type.name !== 'layoutColumn' || maybelayoutColumn.childCount > 1 || !isEmptyParagraph(maybelayoutColumn.firstChild)) {
+      isEmpty = false;
+      return;
+    }
+  });
+  return isEmpty;
+};
 const LayoutBreakoutResizer = ({
   pluginInjectionApi,
   forwardRef,
@@ -18,6 +40,10 @@ const LayoutBreakoutResizer = ({
     var _pluginInjectionApi$w;
     return pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.currentState();
   };
+  const displayGapCursor = useCallback(toggle => {
+    var _pluginInjectionApi$c, _pluginInjectionApi$c2, _pluginInjectionApi$s;
+    return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$s = pluginInjectionApi.selection) === null || _pluginInjectionApi$s === void 0 ? void 0 : _pluginInjectionApi$s.commands.displayGapCursor(toggle))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
+  }, [pluginInjectionApi]);
   return /*#__PURE__*/React.createElement(BreakoutResizer, {
     getRef: forwardRef,
     getPos: getPos,
@@ -26,7 +52,8 @@ const LayoutBreakoutResizer = ({
     getEditorWidth: getEditorWidth,
     disabled: (editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled) === true,
     parentRef: parentRef,
-    editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions
+    editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions,
+    displayGapCursor: displayGapCursor
   });
 };
 const toDOM = () => ['div', {
@@ -37,6 +64,9 @@ const toDOM = () => ['div', {
 export class LayoutSectionView extends ReactNodeView {
   constructor(props) {
     super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
+    if (fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
+      this.isEmpty = isEmptyLayout(this.node);
+    }
     this.options = props.options;
   }
   getContentDOM() {
@@ -46,6 +76,9 @@ export class LayoutSectionView extends ReactNodeView {
     } = DOMSerializer.renderSpec(document, toDOM());
     this.layoutDOM = container.querySelector('[data-layout-section]');
     this.layoutDOM.setAttribute('data-column-rule-style', this.node.attrs.columnRuleStyle);
+    if (fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
+      this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
+    }
     return {
       dom: container,
       contentDOM
@@ -57,6 +90,12 @@ export class LayoutSectionView extends ReactNodeView {
     }
   }
   render(props, forwardRef) {
+    if (fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
+      this.isEmpty = isEmptyLayout(this.node);
+      if (this.layoutDOM) {
+        this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
+      }
+    }
     return /*#__PURE__*/React.createElement(LayoutBreakoutResizer, {
       pluginInjectionApi: props.pluginInjectionApi,
       forwardRef: forwardRef,

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

@@ -4,6 +4,7 @@ import { flatmap, getStepRange, isEmptyDocument, mapChildren } from '@atlaskit/e
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { EVEN_DISTRIBUTED_COL_WIDTHS } from './consts';
 import { pluginKey } from './plugin-key';
@@ -357,7 +358,9 @@ function layoutNeedChanges(node) {
 const getDefaultPresetLayout = layoutNode => {
   const layoutColumnCount = layoutNode.childCount;
   if (layoutColumnCount <= 1) {
-    return 'single';
+    // This prevents the creation of a single column layout
+    // once we support single column layout, we can return 'single'
+    return fg('platform_editor_advanced_layouts_post_fix_patch_1') ? 'two_equal' : 'single';
   }
   switch (layoutColumnCount) {
     case 2:

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

@@ -8,21 +8,41 @@ import { useMemo } from 'react';
 import { css, Global, jsx } from '@emotion/react';
 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] > [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: `"${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)"
-    }
+import { fg } from '@atlaskit/platform-feature-flags';
+const getPlaceholderStyle = message => {
+  if (fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
+    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: `"${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)"
+        }
+      }
+    });
   }
-});
+  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: `"${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 const GlobalStylesWrapper = () => {
   const {
     formatMessage

package/dist/esm/nodeviews/index.js

@@ -1,15 +1,37 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
+import _inherits from "@babel/runtime/helpers/inherits";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { BreakoutResizer, ignoreResizerMutations } from '@atlaskit/editor-common/resizer';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { fg } from '@atlaskit/platform-feature-flags';
+var isEmptyParagraph = function isEmptyParagraph(node) {
+  return !!node && node.type.name === 'paragraph' && !node.childCount;
+};
+var isEmptyLayout = function isEmptyLayout(node) {
+  if (!node) {
+    return false;
+  }
+  // fast check
+  // each column should have size 2 from layoutcolumn and 2 from empty paragraph
+  if (node.content.size / node.childCount !== 4) {
+    return false;
+  }
+  var isEmpty = true;
+  node.content.forEach(function (maybelayoutColumn) {
+    if (maybelayoutColumn.type.name !== 'layoutColumn' || maybelayoutColumn.childCount > 1 || !isEmptyParagraph(maybelayoutColumn.firstChild)) {
+      isEmpty = false;
+      return;
+    }
+  });
+  return isEmpty;
+};
 var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
   var _pluginInjectionApi$a;
   var pluginInjectionApi = _ref.pluginInjectionApi,
@@ -23,6 +45,10 @@ var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
     var _pluginInjectionApi$w;
     return pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.currentState();
   };
+  var displayGapCursor = useCallback(function (toggle) {
+    var _pluginInjectionApi$c, _pluginInjectionApi$c2, _pluginInjectionApi$s;
+    return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$s = pluginInjectionApi.selection) === null || _pluginInjectionApi$s === void 0 ? void 0 : _pluginInjectionApi$s.commands.displayGapCursor(toggle))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
+  }, [pluginInjectionApi]);
   return /*#__PURE__*/React.createElement(BreakoutResizer, {
     getRef: forwardRef,
     getPos: getPos,
@@ -31,7 +57,8 @@ var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
     getEditorWidth: getEditorWidth,
     disabled: (editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled) === true,
     parentRef: parentRef,
-    editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions
+    editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions,
+    displayGapCursor: displayGapCursor
   });
 };
 var toDOM = function toDOM() {
@@ -42,16 +69,18 @@ var toDOM = function toDOM() {
   }, 0]];
 };
 export var LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
-  _inherits(LayoutSectionView, _ReactNodeView);
-  var _super = _createSuper(LayoutSectionView);
   function LayoutSectionView(props) {
     var _this;
     _classCallCheck(this, LayoutSectionView);
-    _this = _super.call(this, props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
+    _this = _callSuper(this, LayoutSectionView, [props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props]);
+    if (fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
+      _this.isEmpty = isEmptyLayout(_this.node);
+    }
     _this.options = props.options;
     return _this;
   }
-  _createClass(LayoutSectionView, [{
+  _inherits(LayoutSectionView, _ReactNodeView);
+  return _createClass(LayoutSectionView, [{
     key: "getContentDOM",
     value: function getContentDOM() {
       var _ref2 = DOMSerializer.renderSpec(document, toDOM()),
@@ -59,6 +88,9 @@ export var LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
         contentDOM = _ref2.contentDOM;
       this.layoutDOM = container.querySelector('[data-layout-section]');
       this.layoutDOM.setAttribute('data-column-rule-style', this.node.attrs.columnRuleStyle);
+      if (fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
+        this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
+      }
       return {
         dom: container,
         contentDOM: contentDOM
@@ -74,6 +106,12 @@ export var LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "render",
     value: function render(props, forwardRef) {
+      if (fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
+        this.isEmpty = isEmptyLayout(this.node);
+        if (this.layoutDOM) {
+          this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
+        }
+      }
       return /*#__PURE__*/React.createElement(LayoutBreakoutResizer, {
         pluginInjectionApi: props.pluginInjectionApi,
         forwardRef: forwardRef,
@@ -88,5 +126,4 @@ export var LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
       return ignoreResizerMutations(mutation);
     }
   }]);
-  return LayoutSectionView;
 }(ReactNodeView);

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

@@ -7,6 +7,7 @@ import { flatmap, getStepRange, isEmptyDocument, mapChildren } from '@atlaskit/e
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { EVEN_DISTRIBUTED_COL_WIDTHS } from './consts';
 import { pluginKey } from './plugin-key';
@@ -373,7 +374,9 @@ function layoutNeedChanges(node) {
 var getDefaultPresetLayout = function getDefaultPresetLayout(layoutNode) {
   var layoutColumnCount = layoutNode.childCount;
   if (layoutColumnCount <= 1) {
-    return 'single';
+    // This prevents the creation of a single column layout
+    // once we support single column layout, we can return 'single'
+    return fg('platform_editor_advanced_layouts_post_fix_patch_1') ? 'two_equal' : 'single';
   }
   switch (layoutColumnCount) {
     case 2:

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

@@ -8,7 +8,25 @@ import { useMemo } from 'react';
 import { css, Global, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import { layoutMessages as messages } from '@atlaskit/editor-common/messages';
+import { fg } from '@atlaskit/platform-feature-flags';
 var getPlaceholderStyle = function getPlaceholderStyle(message) {
+  if (fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
+    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-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)"
+        }
+      }
+    });
+  }
   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

package/dist/types/layoutPluginType.d.ts

@@ -2,6 +2,7 @@ import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/t
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
+import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { insertLayoutColumnsWithAnalytics } from './pm-plugins/actions';
 import { pluginKey } from './pm-plugins/plugin-key';
@@ -11,6 +12,7 @@ export type LayoutPlugin = NextEditorPlugin<'layout', {
     pluginConfiguration: LayoutPluginOptions | undefined;
     dependencies: [
         DecorationsPlugin,
+        SelectionPlugin,
         OptionalPlugin<AnalyticsPlugin>,
         OptionalPlugin<WidthPlugin>,
         OptionalPlugin<EditorDisabledPlugin>

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

@@ -20,6 +20,7 @@ type ForwardRef = (ref: HTMLElement | null) => void;
 export declare class LayoutSectionView extends ReactNodeView<LayoutSectionViewProps> {
     options: LayoutPluginOptions;
     layoutDOM?: HTMLElement;
+    isEmpty?: boolean;
     constructor(props: {
         node: PMNode;
         view: EditorView;

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

@@ -2,6 +2,7 @@ import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/t
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
+import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { insertLayoutColumnsWithAnalytics } from './pm-plugins/actions';
 import { pluginKey } from './pm-plugins/plugin-key';
@@ -11,6 +12,7 @@ export type LayoutPlugin = NextEditorPlugin<'layout', {
     pluginConfiguration: LayoutPluginOptions | undefined;
     dependencies: [
         DecorationsPlugin,
+        SelectionPlugin,
         OptionalPlugin<AnalyticsPlugin>,
         OptionalPlugin<WidthPlugin>,
         OptionalPlugin<EditorDisabledPlugin>

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

@@ -20,6 +20,7 @@ type ForwardRef = (ref: HTMLElement | null) => void;
 export declare class LayoutSectionView extends ReactNodeView<LayoutSectionViewProps> {
     options: LayoutPluginOptions;
     layoutDOM?: HTMLElement;
+    isEmpty?: boolean;
     constructor(props: {
         node: PMNode;
         view: EditorView;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-layout",
-	"version": "1.12.13",
+	"version": "1.12.14",
 	"description": "Layout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,15 +32,16 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^46.1.0",
-		"@atlaskit/editor-common": "^96.1.0",
+		"@atlaskit/editor-common": "^96.4.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
 		"@atlaskit/editor-plugin-decorations": "^1.3.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
+		"@atlaskit/editor-plugin-selection": "^1.6.0",
 		"@atlaskit/editor-plugin-width": "^1.3.0",
 		"@atlaskit/editor-prosemirror": "6.2.1",
-		"@atlaskit/icon": "^23.0.0",
+		"@atlaskit/icon": "^23.1.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/tmp-editor-statsig": "^2.22.0",
+		"@atlaskit/tmp-editor-statsig": "^2.26.0",
 		"@atlaskit/tokens": "^2.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
@@ -99,6 +100,9 @@
 		},
 		"platform-visual-refresh-icons": {
 			"type": "boolean"
+		},
+		"platform_editor_advanced_layouts_post_fix_patch_1": {
+			"type": "boolean"
 		}
 	}
 }