@atlaskit/editor-plugin-layout 2.7.2 → 2.7.4

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-plugin-layout
 
+## 2.7.4
+
+### Patch Changes
+
+- [#158601](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/158601)
+  [`7dfac59b4421f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7dfac59b4421f) -
+  ED-27401: Updated layout guidelines
+- Updated dependencies
+
+## 2.7.3
+
+### Patch Changes
+
+- [#153256](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/153256)
+  [`3644fbe36073d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3644fbe36073d) -
+  [ux] When ViewAll dropdown closes via ESC key press or submenus close via ESC or Enter, the focus
+  is set on ViewAll button.
+- [#152768](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/152768)
+  [`2e80bc703b181`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2e80bc703b181) -
+  [ED-27555] Migrate to useSharedPluginStateSelector for insert-block, layout, loom plugins
+- Updated dependencies
+
 ## 2.7.2
 
 ### Patch Changes

package/dist/cjs/nodeviews/index.js

@@ -15,6 +15,7 @@ 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 _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _utils = require("../pm-plugins/utils");
@@ -22,6 +23,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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 layoutDynamicFullWidthGuidelineOffset = 16;
 var isEmptyParagraph = function isEmptyParagraph(node) {
   return !!node && node.type.name === 'paragraph' && !node.childCount;
 };
@@ -46,6 +48,18 @@ var isEmptyLayout = function isEmptyLayout(node) {
   });
   return isEmpty;
 };
+var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
+  var editorDisabled = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'editorDisabled.editorDisabled');
+  return {
+    editorDisabled: editorDisabled
+  };
+}, function (api) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['editorDisabled']),
+    editorDisabledState = _useSharedPluginState.editorDisabledState;
+  return {
+    editorDisabled: editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled
+  };
+});
 var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
   var _pluginInjectionApi$a;
   var pluginInjectionApi = _ref.pluginInjectionApi,
@@ -53,8 +67,8 @@ var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
     getPos = _ref.getPos,
     view = _ref.view,
     parentRef = _ref.parentRef;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['editorDisabled']),
-    editorDisabledState = _useSharedPluginState.editorDisabledState;
+  var _useSharedState = useSharedState(pluginInjectionApi),
+    editorDisabled = _useSharedState.editorDisabled;
   var getEditorWidth = function getEditorWidth() {
     var _pluginInjectionApi$w;
     return pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.currentState();
@@ -86,14 +100,15 @@ var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
     editorView: view,
     nodeType: "layoutSection",
     getEditorWidth: getEditorWidth,
-    disabled: (editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled) === true || !isBreakoutAvailable(view.state.schema),
+    disabled: editorDisabled === true || !isBreakoutAvailable(view.state.schema),
     parentRef: parentRef,
     editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions,
     displayGuidelines: (0, _experiments.editorExperiment)('single_column_layouts', true) ? displayGuidelines : undefined,
     displayGapCursor: displayGapCursor,
     onResizeStart: function onResizeStart() {
       selectIntoCurrentLayout();
-    }
+    },
+    dynamicFullWidthGuidelineOffset: layoutDynamicFullWidthGuidelineOffset
   });
 };
 var toDOM = function toDOM() {
@@ -103,7 +118,23 @@ var toDOM = function toDOM() {
     'data-layout-section': true
   }, 0]];
 };
+
+/**
+ *
+ */
 var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
+  /**
+   * constructor
+   * @param props
+   * @param props.node
+   * @param props.view
+   * @param props.getPos
+   * @param props.portalProviderAPI
+   * @param props.eventDispatcher
+   * @param props.pluginInjectionApi
+   * @param props.options
+   * @example
+   */
   function LayoutSectionView(props) {
     var _this;
     (0, _classCallCheck2.default)(this, LayoutSectionView);
@@ -112,6 +143,12 @@ var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_Reac
     _this.options = props.options;
     return _this;
   }
+
+  /**
+   * getContentDOM
+   * @example
+   * @returns
+   */
   (0, _inherits2.default)(LayoutSectionView, _ReactNodeView);
   return (0, _createClass2.default)(LayoutSectionView, [{
     key: "getContentDOM",
@@ -130,6 +167,13 @@ var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_Reac
         contentDOM: contentDOM
       };
     }
+
+    /**
+     * setDomAttrs
+     * @param node
+     * @param element
+     * @example
+     */
   }, {
     key: "setDomAttrs",
     value: function setDomAttrs(node, element) {
@@ -137,6 +181,14 @@ var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_Reac
         this.layoutDOM.setAttribute('data-column-rule-style', node.attrs.columnRuleStyle);
       }
     }
+
+    /**
+     * render
+     * @param props
+     * @param forwardRef
+     * @example
+     * @returns
+     */
   }, {
     key: "render",
     value: function render(props, forwardRef) {
@@ -152,6 +204,13 @@ var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_Reac
         parentRef: this.layoutDOM
       });
     }
+
+    /**
+     * ignoreMutation
+     * @param mutation
+     * @example
+     * @returns
+     */
   }, {
     key: "ignoreMutation",
     value: function ignoreMutation(mutation) {

package/dist/cjs/ui/toolbar.js

@@ -21,6 +21,7 @@ var _layoutThreeColumnsSidebarsEditorLayoutThreeWithSidebars = _interopRequireDe
 var _layoutTwoColumnsEditorLayoutTwoEqual = _interopRequireDefault(require("@atlaskit/icon/core/migration/layout-two-columns--editor-layout-two-equal"));
 var _layoutTwoColumnsSidebarLeftEditorLayoutTwoLeftSidebar = _interopRequireDefault(require("@atlaskit/icon/core/migration/layout-two-columns-sidebar-left--editor-layout-two-left-sidebar"));
 var _layoutTwoColumnsSidebarRightEditorLayoutTwoRightSidebar = _interopRequireDefault(require("@atlaskit/icon/core/migration/layout-two-columns-sidebar-right--editor-layout-two-right-sidebar"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _actions = require("../pm-plugins/actions");
 var _LayoutThreeWithLeftSidebars = require("./icons/LayoutThreeWithLeftSidebars");
@@ -235,8 +236,12 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos
         onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className)
       };
     };
+    // testId is required to show focus on trigger button on ESC key press
+    // see hideOnEsc in platform/packages/editor/editor-plugin-floating-toolbar/src/ui/Dropdown.tsx
+    var testId = (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_8') ? 'layout-overflow-dropdown-trigger' : undefined;
     var overflowMenu = {
       type: 'overflow-dropdown',
+      testId: testId,
       options: [_objectSpread({
         title: intl.formatMessage(_messages.default.copyToClipboard),
         onClick: function onClick() {

package/dist/es2019/nodeviews/index.js

@@ -1,10 +1,12 @@
 import React, { useCallback } from 'react';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginState, sharedPluginStateHookMigratorFactory } 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 { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { selectIntoLayout } from '../pm-plugins/utils';
+const layoutDynamicFullWidthGuidelineOffset = 16;
 const isEmptyParagraph = node => {
   return !!node && node.type.name === 'paragraph' && !node.childCount;
 };
@@ -29,6 +31,19 @@ const isEmptyLayout = node => {
   });
   return isEmpty;
 };
+const useSharedState = sharedPluginStateHookMigratorFactory(api => {
+  const editorDisabled = useSharedPluginStateSelector(api, 'editorDisabled.editorDisabled');
+  return {
+    editorDisabled
+  };
+}, api => {
+  const {
+    editorDisabledState
+  } = useSharedPluginState(api, ['editorDisabled']);
+  return {
+    editorDisabled: editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled
+  };
+});
 const LayoutBreakoutResizer = ({
   pluginInjectionApi,
   forwardRef,
@@ -38,8 +53,8 @@ const LayoutBreakoutResizer = ({
 }) => {
   var _pluginInjectionApi$a;
   const {
-    editorDisabledState
-  } = useSharedPluginState(pluginInjectionApi, ['editorDisabled']);
+    editorDisabled
+  } = useSharedState(pluginInjectionApi);
   const getEditorWidth = () => {
     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();
@@ -71,14 +86,15 @@ const LayoutBreakoutResizer = ({
     editorView: view,
     nodeType: "layoutSection",
     getEditorWidth: getEditorWidth,
-    disabled: (editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled) === true || !isBreakoutAvailable(view.state.schema),
+    disabled: editorDisabled === true || !isBreakoutAvailable(view.state.schema),
     parentRef: parentRef,
     editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions,
     displayGuidelines: editorExperiment('single_column_layouts', true) ? displayGuidelines : undefined,
     displayGapCursor: displayGapCursor,
     onResizeStart: () => {
       selectIntoCurrentLayout();
-    }
+    },
+    dynamicFullWidthGuidelineOffset: layoutDynamicFullWidthGuidelineOffset
   });
 };
 const toDOM = () => ['div', {
@@ -86,12 +102,34 @@ const toDOM = () => ['div', {
 }, ['div', {
   'data-layout-section': true
 }, 0]];
+
+/**
+ *
+ */
 export class LayoutSectionView extends ReactNodeView {
+  /**
+   * constructor
+   * @param props
+   * @param props.node
+   * @param props.view
+   * @param props.getPos
+   * @param props.portalProviderAPI
+   * @param props.eventDispatcher
+   * @param props.pluginInjectionApi
+   * @param props.options
+   * @example
+   */
   constructor(props) {
     super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
     this.isEmpty = isEmptyLayout(this.node);
     this.options = props.options;
   }
+
+  /**
+   * getContentDOM
+   * @example
+   * @returns
+   */
   getContentDOM() {
     const {
       dom: container,
@@ -108,11 +146,26 @@ export class LayoutSectionView extends ReactNodeView {
       contentDOM
     };
   }
+
+  /**
+   * setDomAttrs
+   * @param node
+   * @param element
+   * @example
+   */
   setDomAttrs(node, element) {
     if (this.layoutDOM) {
       this.layoutDOM.setAttribute('data-column-rule-style', node.attrs.columnRuleStyle);
     }
   }
+
+  /**
+   * render
+   * @param props
+   * @param forwardRef
+   * @example
+   * @returns
+   */
   render(props, forwardRef) {
     this.isEmpty = isEmptyLayout(this.node);
     if (this.layoutDOM) {
@@ -126,6 +179,13 @@ export class LayoutSectionView extends ReactNodeView {
       parentRef: this.layoutDOM
     });
   }
+
+  /**
+   * ignoreMutation
+   * @param mutation
+   * @example
+   * @returns
+   */
   ignoreMutation(mutation) {
     return ignoreResizerMutations(mutation);
   }

package/dist/es2019/ui/toolbar.js

@@ -11,6 +11,7 @@ import LayoutThreeColumnsSidebarsIcon from '@atlaskit/icon/core/migration/layout
 import LayoutTwoColumnsIcon from '@atlaskit/icon/core/migration/layout-two-columns--editor-layout-two-equal';
 import LayoutTwoColumnsSidebarLeftIcon from '@atlaskit/icon/core/migration/layout-two-columns-sidebar-left--editor-layout-two-left-sidebar';
 import LayoutTwoColumnsSidebarRightIcon from '@atlaskit/icon/core/migration/layout-two-columns-sidebar-right--editor-layout-two-right-sidebar';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { deleteActiveLayoutNode, getPresetLayout, setPresetLayout } from '../pm-plugins/actions';
 import { LayoutThreeWithLeftSidebarsIcon } from './icons/LayoutThreeWithLeftSidebars';
@@ -217,8 +218,12 @@ export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts
       onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
       onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className)
     });
+    // testId is required to show focus on trigger button on ESC key press
+    // see hideOnEsc in platform/packages/editor/editor-plugin-floating-toolbar/src/ui/Dropdown.tsx
+    const testId = fg('platform_editor_controls_patch_8') ? 'layout-overflow-dropdown-trigger' : undefined;
     const overflowMenu = {
       type: 'overflow-dropdown',
+      testId,
       options: [{
         title: intl.formatMessage(commonMessages.copyToClipboard),
         onClick: () => {

package/dist/esm/nodeviews/index.js

@@ -6,12 +6,14 @@ 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, { useCallback } from 'react';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginState, sharedPluginStateHookMigratorFactory } 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 { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { selectIntoLayout } from '../pm-plugins/utils';
+var layoutDynamicFullWidthGuidelineOffset = 16;
 var isEmptyParagraph = function isEmptyParagraph(node) {
   return !!node && node.type.name === 'paragraph' && !node.childCount;
 };
@@ -36,6 +38,18 @@ var isEmptyLayout = function isEmptyLayout(node) {
   });
   return isEmpty;
 };
+var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
+  var editorDisabled = useSharedPluginStateSelector(api, 'editorDisabled.editorDisabled');
+  return {
+    editorDisabled: editorDisabled
+  };
+}, function (api) {
+  var _useSharedPluginState = useSharedPluginState(api, ['editorDisabled']),
+    editorDisabledState = _useSharedPluginState.editorDisabledState;
+  return {
+    editorDisabled: editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled
+  };
+});
 var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
   var _pluginInjectionApi$a;
   var pluginInjectionApi = _ref.pluginInjectionApi,
@@ -43,8 +57,8 @@ var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
     getPos = _ref.getPos,
     view = _ref.view,
     parentRef = _ref.parentRef;
-  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['editorDisabled']),
-    editorDisabledState = _useSharedPluginState.editorDisabledState;
+  var _useSharedState = useSharedState(pluginInjectionApi),
+    editorDisabled = _useSharedState.editorDisabled;
   var getEditorWidth = function getEditorWidth() {
     var _pluginInjectionApi$w;
     return pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.currentState();
@@ -76,14 +90,15 @@ var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
     editorView: view,
     nodeType: "layoutSection",
     getEditorWidth: getEditorWidth,
-    disabled: (editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled) === true || !isBreakoutAvailable(view.state.schema),
+    disabled: editorDisabled === true || !isBreakoutAvailable(view.state.schema),
     parentRef: parentRef,
     editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions,
     displayGuidelines: editorExperiment('single_column_layouts', true) ? displayGuidelines : undefined,
     displayGapCursor: displayGapCursor,
     onResizeStart: function onResizeStart() {
       selectIntoCurrentLayout();
-    }
+    },
+    dynamicFullWidthGuidelineOffset: layoutDynamicFullWidthGuidelineOffset
   });
 };
 var toDOM = function toDOM() {
@@ -93,7 +108,23 @@ var toDOM = function toDOM() {
     'data-layout-section': true
   }, 0]];
 };
+
+/**
+ *
+ */
 export var LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
+  /**
+   * constructor
+   * @param props
+   * @param props.node
+   * @param props.view
+   * @param props.getPos
+   * @param props.portalProviderAPI
+   * @param props.eventDispatcher
+   * @param props.pluginInjectionApi
+   * @param props.options
+   * @example
+   */
   function LayoutSectionView(props) {
     var _this;
     _classCallCheck(this, LayoutSectionView);
@@ -102,6 +133,12 @@ export var LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
     _this.options = props.options;
     return _this;
   }
+
+  /**
+   * getContentDOM
+   * @example
+   * @returns
+   */
   _inherits(LayoutSectionView, _ReactNodeView);
   return _createClass(LayoutSectionView, [{
     key: "getContentDOM",
@@ -120,6 +157,13 @@ export var LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
         contentDOM: contentDOM
       };
     }
+
+    /**
+     * setDomAttrs
+     * @param node
+     * @param element
+     * @example
+     */
   }, {
     key: "setDomAttrs",
     value: function setDomAttrs(node, element) {
@@ -127,6 +171,14 @@ export var LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
         this.layoutDOM.setAttribute('data-column-rule-style', node.attrs.columnRuleStyle);
       }
     }
+
+    /**
+     * render
+     * @param props
+     * @param forwardRef
+     * @example
+     * @returns
+     */
   }, {
     key: "render",
     value: function render(props, forwardRef) {
@@ -142,6 +194,13 @@ export var LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
         parentRef: this.layoutDOM
       });
     }
+
+    /**
+     * ignoreMutation
+     * @param mutation
+     * @example
+     * @returns
+     */
   }, {
     key: "ignoreMutation",
     value: function ignoreMutation(mutation) {

package/dist/esm/ui/toolbar.js

@@ -15,6 +15,7 @@ import LayoutThreeColumnsSidebarsIcon from '@atlaskit/icon/core/migration/layout
 import LayoutTwoColumnsIcon from '@atlaskit/icon/core/migration/layout-two-columns--editor-layout-two-equal';
 import LayoutTwoColumnsSidebarLeftIcon from '@atlaskit/icon/core/migration/layout-two-columns-sidebar-left--editor-layout-two-left-sidebar';
 import LayoutTwoColumnsSidebarRightIcon from '@atlaskit/icon/core/migration/layout-two-columns-sidebar-right--editor-layout-two-right-sidebar';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { deleteActiveLayoutNode, getPresetLayout, setPresetLayout } from '../pm-plugins/actions';
 import { LayoutThreeWithLeftSidebarsIcon } from './icons/LayoutThreeWithLeftSidebars';
@@ -225,8 +226,12 @@ export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout
         onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className)
       };
     };
+    // testId is required to show focus on trigger button on ESC key press
+    // see hideOnEsc in platform/packages/editor/editor-plugin-floating-toolbar/src/ui/Dropdown.tsx
+    var testId = fg('platform_editor_controls_patch_8') ? 'layout-overflow-dropdown-trigger' : undefined;
     var overflowMenu = {
       type: 'overflow-dropdown',
+      testId: testId,
       options: [_objectSpread({
         title: intl.formatMessage(commonMessages.copyToClipboard),
         onClick: function onClick() {

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

@@ -17,10 +17,25 @@ type LayoutSectionViewProps = {
     options: LayoutPluginOptions;
 };
 type ForwardRef = (ref: HTMLElement | null) => void;
+/**
+ *
+ */
 export declare class LayoutSectionView extends ReactNodeView<LayoutSectionViewProps> {
     options: LayoutPluginOptions;
     layoutDOM?: HTMLElement;
     isEmpty?: boolean;
+    /**
+     * constructor
+     * @param props
+     * @param props.node
+     * @param props.view
+     * @param props.getPos
+     * @param props.portalProviderAPI
+     * @param props.eventDispatcher
+     * @param props.pluginInjectionApi
+     * @param props.options
+     * @example
+     */
     constructor(props: {
         node: PMNode;
         view: EditorView;
@@ -30,12 +45,36 @@ export declare class LayoutSectionView extends ReactNodeView<LayoutSectionViewPr
         pluginInjectionApi: ExtractInjectionAPI<LayoutPlugin>;
         options: LayoutPluginOptions;
     });
+    /**
+     * getContentDOM
+     * @example
+     * @returns
+     */
     getContentDOM(): {
         dom: HTMLElement;
         contentDOM: HTMLElement | undefined;
     };
+    /**
+     * setDomAttrs
+     * @param node
+     * @param element
+     * @example
+     */
     setDomAttrs(node: PMNode, element: HTMLElement): void;
+    /**
+     * render
+     * @param props
+     * @param forwardRef
+     * @example
+     * @returns
+     */
     render(props: LayoutSectionViewProps, forwardRef: ForwardRef): React.JSX.Element;
+    /**
+     * ignoreMutation
+     * @param mutation
+     * @example
+     * @returns
+     */
     ignoreMutation(mutation: MutationRecord | {
         type: 'selection';
         target: Node;

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

@@ -17,10 +17,25 @@ type LayoutSectionViewProps = {
     options: LayoutPluginOptions;
 };
 type ForwardRef = (ref: HTMLElement | null) => void;
+/**
+ *
+ */
 export declare class LayoutSectionView extends ReactNodeView<LayoutSectionViewProps> {
     options: LayoutPluginOptions;
     layoutDOM?: HTMLElement;
     isEmpty?: boolean;
+    /**
+     * constructor
+     * @param props
+     * @param props.node
+     * @param props.view
+     * @param props.getPos
+     * @param props.portalProviderAPI
+     * @param props.eventDispatcher
+     * @param props.pluginInjectionApi
+     * @param props.options
+     * @example
+     */
     constructor(props: {
         node: PMNode;
         view: EditorView;
@@ -30,12 +45,36 @@ export declare class LayoutSectionView extends ReactNodeView<LayoutSectionViewPr
         pluginInjectionApi: ExtractInjectionAPI<LayoutPlugin>;
         options: LayoutPluginOptions;
     });
+    /**
+     * getContentDOM
+     * @example
+     * @returns
+     */
     getContentDOM(): {
         dom: HTMLElement;
         contentDOM: HTMLElement | undefined;
     };
+    /**
+     * setDomAttrs
+     * @param node
+     * @param element
+     * @example
+     */
     setDomAttrs(node: PMNode, element: HTMLElement): void;
+    /**
+     * render
+     * @param props
+     * @param forwardRef
+     * @example
+     * @returns
+     */
     render(props: LayoutSectionViewProps, forwardRef: ForwardRef): React.JSX.Element;
+    /**
+     * ignoreMutation
+     * @param mutation
+     * @example
+     * @returns
+     */
     ignoreMutation(mutation: MutationRecord | {
         type: 'selection';
         target: Node;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-layout",
-	"version": "2.7.2",
+	"version": "2.7.4",
 	"description": "Layout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,8 +34,8 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^104.1.0",
-		"@atlaskit/editor-plugin-analytics": "^2.2.0",
+		"@atlaskit/editor-common": "^105.8.0",
+		"@atlaskit/editor-plugin-analytics": "^2.3.0",
 		"@atlaskit/editor-plugin-decorations": "^2.0.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
 		"@atlaskit/editor-plugin-guideline": "^2.0.0",
@@ -43,10 +43,10 @@
 		"@atlaskit/editor-plugin-width": "^3.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
-		"@atlaskit/icon": "^26.0.0",
+		"@atlaskit/icon": "^26.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^4.19.0",
-		"@atlaskit/tokens": "^4.8.0",
+		"@atlaskit/tmp-editor-statsig": "^4.24.0",
+		"@atlaskit/tokens": "^4.9.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
@@ -110,6 +110,9 @@
 		},
 		"platform_editor_controls_patch_analytics_2": {
 			"type": "boolean"
+		},
+		"platform_editor_controls_patch_8": {
+			"type": "boolean"
 		}
 	}
 }