@atlaskit/editor-plugin-layout 3.2.2 → 4.0.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-layout
 
+## 4.0.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.0.0
+
+### Patch Changes
+
+- [`e882e86092666`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e882e86092666) -
+  [ux] Register expand, layout and code block itmes in block menu. Update panel item.
+- Updated dependencies
+
 ## 3.2.2
 
 ### Patch Changes

package/dist/cjs/layoutPlugin.js

@@ -9,17 +9,20 @@ var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _schema = require("@atlaskit/adf-schema/schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _blockMenu = require("@atlaskit/editor-common/block-menu");
 var _messages = require("@atlaskit/editor-common/messages");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _actions = require("./pm-plugins/actions");
 var _main = _interopRequireDefault(require("./pm-plugins/main"));
 var _pluginKey = require("./pm-plugins/plugin-key");
 var _resizing = _interopRequireDefault(require("./pm-plugins/resizing"));
 var _globalStyles = require("./ui/global-styles");
+var _LayoutBlockMenuItem = require("./ui/LayoutBlockMenuItem");
 var _toolbar = require("./ui/toolbar");
 /**
  * This function is used to set the selection into
@@ -56,6 +59,19 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
   var allowAdvancedSingleColumnLayout = (0, _experiments.editorExperiment)('advanced_layouts', true) && (0, _experiments.editorExperiment)('single_column_layouts', true, {
     exposure: true
   });
+  if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
+    var _api$blockMenu;
+    api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents([{
+      type: 'block-menu-item',
+      key: _blockMenu.FORMAT_LAYOUT_MENU_ITEM.key,
+      parent: {
+        type: 'block-menu-section',
+        key: _blockMenu.FORMAT_MENU_ITEM.key,
+        rank: _blockMenu.FORMAT_NESTED_MENU_RANK[_blockMenu.FORMAT_LAYOUT_MENU_ITEM.key]
+      },
+      component: (0, _LayoutBlockMenuItem.createLayoutBlockMenuItem)(api)
+    }]);
+  }
   return {
     name: 'layout',
     nodes: function nodes() {

package/dist/cjs/nodeviews/index.js

@@ -11,18 +11,22 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 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 _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _model = require("@atlaskit/editor-prosemirror/model");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _utils = require("../pm-plugins/utils");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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; })(); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var layoutDynamicFullWidthGuidelineOffset = 16;
 var isEmptyParagraph = function isEmptyParagraph(node) {
   return !!node && node.type.name === 'paragraph' && !node.childCount;
@@ -110,12 +114,14 @@ var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
     dynamicFullWidthGuidelineOffset: layoutDynamicFullWidthGuidelineOffset
   });
 };
-var toDOM = function toDOM() {
+var toDOM = function toDOM(node) {
   return ['div', {
     class: 'layout-section-container'
-  }, ['div', {
+  }, ['div', _objectSpread({
     'data-layout-section': true
-  }, 0]];
+  }, (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') && {
+    'data-local-id': node.attrs.localId
+  }), 0]];
 };
 
 /**
@@ -152,7 +158,7 @@ var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_Reac
   return (0, _createClass2.default)(LayoutSectionView, [{
     key: "getContentDOM",
     value: function getContentDOM() {
-      var _ref2 = _model.DOMSerializer.renderSpec(document, toDOM()),
+      var _ref2 = _model.DOMSerializer.renderSpec(document, toDOM(this.node)),
         container = _ref2.dom,
         contentDOM = _ref2.contentDOM;
 
@@ -161,6 +167,9 @@ var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_Reac
       this.layoutDOM = container.querySelector('[data-layout-section]');
       this.layoutDOM.setAttribute('data-column-rule-style', this.node.attrs.columnRuleStyle);
       this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
+      if ((0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid')) {
+        this.layoutDOM.setAttribute('data-local-id', this.node.attrs.localId);
+      }
       return {
         dom: container,
         contentDOM: contentDOM

package/dist/cjs/ui/LayoutBlockMenuItem.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createLayoutBlockMenuItem = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("@atlaskit/editor-common/messages");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _layoutTwoColumns = _interopRequireDefault(require("@atlaskit/icon/core/layout-two-columns"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var LayoutBlockMenuItem = function LayoutBlockMenuItem(_ref) {
+  var api = _ref.api;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var selection = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'selection.selection');
+  var isLayoutSelected = (0, _react.useMemo)(function () {
+    if (!selection) {
+      return false;
+    }
+    if (selection instanceof _state.NodeSelection) {
+      return selection.node.type.name === 'layoutSection';
+    }
+    return false;
+  }, [selection]);
+  var handleClick = function handleClick() {
+    var _api$blockMenu;
+    api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.formatNode('layout'));
+  };
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    onClick: handleClick,
+    isSelected: isLayoutSelected,
+    elemBefore: /*#__PURE__*/_react.default.createElement(_layoutTwoColumns.default, {
+      label: ""
+    })
+  }, formatMessage(_messages.blockMenuMessages.layout));
+};
+var createLayoutBlockMenuItem = exports.createLayoutBlockMenuItem = function createLayoutBlockMenuItem(api) {
+  return function () {
+    return /*#__PURE__*/_react.default.createElement(LayoutBlockMenuItem, {
+      api: api
+    });
+  };
+};

package/dist/es2019/layoutPlugin.js

@@ -2,17 +2,20 @@ import React from 'react';
 import { layoutColumn, layoutSection, layoutColumnWithLocalId, layoutSectionWithLocalId } from '@atlaskit/adf-schema';
 import { layoutSectionWithSingleColumn, layoutSectionWithSingleColumnLocalId } from '@atlaskit/adf-schema/schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { FORMAT_MENU_ITEM, FORMAT_LAYOUT_MENU_ITEM, FORMAT_NESTED_MENU_RANK } from '@atlaskit/editor-common/block-menu';
 import { layoutMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconFiveColumnLayout, IconFourColumnLayout, IconLayout, IconOneColumnLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/quick-insert';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 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 { GlobalStylesWrapper } from './ui/global-styles';
+import { createLayoutBlockMenuItem } from './ui/LayoutBlockMenuItem';
 import { buildToolbar } from './ui/toolbar';
 
 /**
@@ -49,6 +52,19 @@ export const layoutPlugin = ({
   const allowAdvancedSingleColumnLayout = editorExperiment('advanced_layouts', true) && editorExperiment('single_column_layouts', true, {
     exposure: true
   });
+  if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
+    var _api$blockMenu;
+    api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.registerBlockMenuComponents([{
+      type: 'block-menu-item',
+      key: FORMAT_LAYOUT_MENU_ITEM.key,
+      parent: {
+        type: 'block-menu-section',
+        key: FORMAT_MENU_ITEM.key,
+        rank: FORMAT_NESTED_MENU_RANK[FORMAT_LAYOUT_MENU_ITEM.key]
+      },
+      component: createLayoutBlockMenuItem(api)
+    }]);
+  }
   return {
     name: 'layout',
     nodes() {

package/dist/es2019/nodeviews/index.js

@@ -4,6 +4,7 @@ import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { BreakoutResizer, ignoreResizerMutations } from '@atlaskit/editor-common/resizer';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { selectIntoLayout } from '../pm-plugins/utils';
@@ -96,10 +97,13 @@ const LayoutBreakoutResizer = ({
     dynamicFullWidthGuidelineOffset: layoutDynamicFullWidthGuidelineOffset
   });
 };
-const toDOM = () => ['div', {
+const toDOM = node => ['div', {
   class: 'layout-section-container'
 }, ['div', {
-  'data-layout-section': true
+  'data-layout-section': true,
+  ...(fg('platform_editor_adf_with_localid') && {
+    'data-local-id': node.attrs.localId
+  })
 }, 0]];
 
 /**
@@ -133,13 +137,16 @@ export class LayoutSectionView extends ReactNodeView {
     const {
       dom: container,
       contentDOM
-    } = DOMSerializer.renderSpec(document, toDOM());
+    } = DOMSerializer.renderSpec(document, toDOM(this.node));
 
     // Ignored via go/ees005
     // eslint-disable-next-line @atlaskit/editor/no-as-casting
     this.layoutDOM = container.querySelector('[data-layout-section]');
     this.layoutDOM.setAttribute('data-column-rule-style', this.node.attrs.columnRuleStyle);
     this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
+    if (fg('platform_editor_adf_with_localid')) {
+      this.layoutDOM.setAttribute('data-local-id', this.node.attrs.localId);
+    }
     return {
       dom: container,
       contentDOM

package/dist/es2019/ui/LayoutBlockMenuItem.js

@@ -0,0 +1,40 @@
+import React, { useMemo } from 'react';
+import { useIntl } from 'react-intl-next';
+import { blockMenuMessages } from '@atlaskit/editor-common/messages';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import LayoutTwoColumnsIcon from '@atlaskit/icon/core/layout-two-columns';
+const LayoutBlockMenuItem = ({
+  api
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const selection = useSharedPluginStateSelector(api, 'selection.selection');
+  const isLayoutSelected = useMemo(() => {
+    if (!selection) {
+      return false;
+    }
+    if (selection instanceof NodeSelection) {
+      return selection.node.type.name === 'layoutSection';
+    }
+    return false;
+  }, [selection]);
+  const handleClick = () => {
+    var _api$blockMenu;
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.formatNode('layout'));
+  };
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
+    isSelected: isLayoutSelected,
+    elemBefore: /*#__PURE__*/React.createElement(LayoutTwoColumnsIcon, {
+      label: ""
+    })
+  }, formatMessage(blockMenuMessages.layout));
+};
+export const createLayoutBlockMenuItem = api => {
+  return () => /*#__PURE__*/React.createElement(LayoutBlockMenuItem, {
+    api: api
+  });
+};

package/dist/esm/layoutPlugin.js

@@ -2,17 +2,20 @@ import React from 'react';
 import { layoutColumn, layoutSection, layoutColumnWithLocalId, layoutSectionWithLocalId } from '@atlaskit/adf-schema';
 import { layoutSectionWithSingleColumn, layoutSectionWithSingleColumnLocalId } from '@atlaskit/adf-schema/schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { FORMAT_MENU_ITEM, FORMAT_LAYOUT_MENU_ITEM, FORMAT_NESTED_MENU_RANK } from '@atlaskit/editor-common/block-menu';
 import { layoutMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconFiveColumnLayout, IconFourColumnLayout, IconLayout, IconOneColumnLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/quick-insert';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 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 { GlobalStylesWrapper } from './ui/global-styles';
+import { createLayoutBlockMenuItem } from './ui/LayoutBlockMenuItem';
 import { buildToolbar } from './ui/toolbar';
 
 /**
@@ -50,6 +53,19 @@ export var layoutPlugin = function layoutPlugin(_ref) {
   var allowAdvancedSingleColumnLayout = editorExperiment('advanced_layouts', true) && editorExperiment('single_column_layouts', true, {
     exposure: true
   });
+  if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
+    var _api$blockMenu;
+    api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents([{
+      type: 'block-menu-item',
+      key: FORMAT_LAYOUT_MENU_ITEM.key,
+      parent: {
+        type: 'block-menu-section',
+        key: FORMAT_MENU_ITEM.key,
+        rank: FORMAT_NESTED_MENU_RANK[FORMAT_LAYOUT_MENU_ITEM.key]
+      },
+      component: createLayoutBlockMenuItem(api)
+    }]);
+  }
   return {
     name: 'layout',
     nodes: function nodes() {

package/dist/esm/nodeviews/index.js

@@ -3,14 +3,18 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; })(); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _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 React, { useCallback } from 'react';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { BreakoutResizer, ignoreResizerMutations } from '@atlaskit/editor-common/resizer';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { selectIntoLayout } from '../pm-plugins/utils';
@@ -101,12 +105,14 @@ var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
     dynamicFullWidthGuidelineOffset: layoutDynamicFullWidthGuidelineOffset
   });
 };
-var toDOM = function toDOM() {
+var toDOM = function toDOM(node) {
   return ['div', {
     class: 'layout-section-container'
-  }, ['div', {
+  }, ['div', _objectSpread({
     'data-layout-section': true
-  }, 0]];
+  }, fg('platform_editor_adf_with_localid') && {
+    'data-local-id': node.attrs.localId
+  }), 0]];
 };
 
 /**
@@ -143,7 +149,7 @@ export var LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
   return _createClass(LayoutSectionView, [{
     key: "getContentDOM",
     value: function getContentDOM() {
-      var _ref2 = DOMSerializer.renderSpec(document, toDOM()),
+      var _ref2 = DOMSerializer.renderSpec(document, toDOM(this.node)),
         container = _ref2.dom,
         contentDOM = _ref2.contentDOM;
 
@@ -152,6 +158,9 @@ export var LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
       this.layoutDOM = container.querySelector('[data-layout-section]');
       this.layoutDOM.setAttribute('data-column-rule-style', this.node.attrs.columnRuleStyle);
       this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
+      if (fg('platform_editor_adf_with_localid')) {
+        this.layoutDOM.setAttribute('data-local-id', this.node.attrs.localId);
+      }
       return {
         dom: container,
         contentDOM: contentDOM

package/dist/esm/ui/LayoutBlockMenuItem.js

@@ -0,0 +1,40 @@
+import React, { useMemo } from 'react';
+import { useIntl } from 'react-intl-next';
+import { blockMenuMessages } from '@atlaskit/editor-common/messages';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import LayoutTwoColumnsIcon from '@atlaskit/icon/core/layout-two-columns';
+var LayoutBlockMenuItem = function LayoutBlockMenuItem(_ref) {
+  var api = _ref.api;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var selection = useSharedPluginStateSelector(api, 'selection.selection');
+  var isLayoutSelected = useMemo(function () {
+    if (!selection) {
+      return false;
+    }
+    if (selection instanceof NodeSelection) {
+      return selection.node.type.name === 'layoutSection';
+    }
+    return false;
+  }, [selection]);
+  var handleClick = function handleClick() {
+    var _api$blockMenu;
+    api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.formatNode('layout'));
+  };
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
+    isSelected: isLayoutSelected,
+    elemBefore: /*#__PURE__*/React.createElement(LayoutTwoColumnsIcon, {
+      label: ""
+    })
+  }, formatMessage(blockMenuMessages.layout));
+};
+export var createLayoutBlockMenuItem = function createLayoutBlockMenuItem(api) {
+  return function () {
+    return /*#__PURE__*/React.createElement(LayoutBlockMenuItem, {
+      api: api
+    });
+  };
+};

package/dist/types/layoutPluginType.d.ts

@@ -1,5 +1,6 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu';
 import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
@@ -15,7 +16,8 @@ export type LayoutPluginDependencies = [
     OptionalPlugin<WidthPlugin>,
     OptionalPlugin<EditorDisabledPlugin>,
     OptionalPlugin<GuidelinePlugin>,
-    OptionalPlugin<InteractionPlugin>
+    OptionalPlugin<InteractionPlugin>,
+    OptionalPlugin<BlockMenuPlugin>
 ];
 export type LayoutPlugin = NextEditorPlugin<'layout', {
     actions: {

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { LayoutPlugin } from '../layoutPluginType';
+export declare const createLayoutBlockMenuItem: (api: ExtractInjectionAPI<LayoutPlugin>) => () => React.JSX.Element;

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

@@ -1,5 +1,6 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu';
 import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
@@ -15,7 +16,8 @@ export type LayoutPluginDependencies = [
     OptionalPlugin<WidthPlugin>,
     OptionalPlugin<EditorDisabledPlugin>,
     OptionalPlugin<GuidelinePlugin>,
-    OptionalPlugin<InteractionPlugin>
+    OptionalPlugin<InteractionPlugin>,
+    OptionalPlugin<BlockMenuPlugin>
 ];
 export type LayoutPlugin = NextEditorPlugin<'layout', {
     actions: {

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { LayoutPlugin } from '../layoutPluginType';
+export declare const createLayoutBlockMenuItem: (api: ExtractInjectionAPI<LayoutPlugin>) => () => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-layout",
-	"version": "3.2.2",
+	"version": "4.0.1",
 	"description": "Layout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,25 +30,27 @@
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
 		"@atlaskit/adf-schema": "^50.2.3",
-		"@atlaskit/editor-plugin-analytics": "^3.0.0",
-		"@atlaskit/editor-plugin-decorations": "^3.1.0",
-		"@atlaskit/editor-plugin-editor-disabled": "^3.0.0",
-		"@atlaskit/editor-plugin-guideline": "^3.0.0",
-		"@atlaskit/editor-plugin-interaction": "^5.0.0",
-		"@atlaskit/editor-plugin-selection": "^3.2.0",
-		"@atlaskit/editor-plugin-width": "^4.0.0",
+		"@atlaskit/editor-plugin-analytics": "^4.0.0",
+		"@atlaskit/editor-plugin-block-menu": "^1.0.0",
+		"@atlaskit/editor-plugin-decorations": "^4.0.0",
+		"@atlaskit/editor-plugin-editor-disabled": "^4.0.0",
+		"@atlaskit/editor-plugin-guideline": "^4.0.0",
+		"@atlaskit/editor-plugin-interaction": "^6.0.0",
+		"@atlaskit/editor-plugin-selection": "^4.0.0",
+		"@atlaskit/editor-plugin-width": "^5.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.6.0",
+		"@atlaskit/editor-toolbar": "^0.7.0",
 		"@atlaskit/icon": "^28.1.0",
 		"@atlaskit/icon-lab": "^5.7.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^11.9.0",
+		"@atlaskit/tmp-editor-statsig": "^12.2.0",
 		"@atlaskit/tokens": "^6.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.33.0",
+		"@atlaskit/editor-common": "^108.1.0",
 		"react": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},