@atlaskit/editor-plugin-layout 10.2.0 → 10.3.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-layout
 
+## 10.3.1
+
+### Patch Changes
+
+- [`4c22fe79f104e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4c22fe79f104e) -
+  Guard against undefined plugin state when reading shared state in floating-toolbar handler
+  (layout) and useEffect deps array (block-controls drag handle); fixes intermittent crash during
+  editor reconfigure / partial-preset transitions.
+
+## 10.3.0
+
+### Minor Changes
+
+- [`89a8af72aa2c9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/89a8af72aa2c9) -
+  Add reusable toolbar menu container and render the layout column menu in a popup
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 10.2.0
 
 ### Minor Changes

package/dist/cjs/layoutPlugin.js

@@ -121,20 +121,23 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
     },
     pluginsOptions: {
       floatingToolbar: function floatingToolbar(state, intl) {
-        var _ref3 = _pluginKey.pluginKey.getState(state),
-          pos = _ref3.pos,
-          allowBreakout = _ref3.allowBreakout,
-          addSidebarLayouts = _ref3.addSidebarLayouts,
-          allowSingleColumnLayout = _ref3.allowSingleColumnLayout,
-          isResizing = _ref3.isResizing;
+        var layoutState = _pluginKey.pluginKey.getState(state);
+        if (!layoutState) {
+          return undefined;
+        }
+        var pos = layoutState.pos,
+          allowBreakout = layoutState.allowBreakout,
+          addSidebarLayouts = layoutState.addSidebarLayouts,
+          allowSingleColumnLayout = layoutState.allowSingleColumnLayout,
+          isResizing = layoutState.isResizing;
         var shouldHideToolbar = isResizing && (0, _experiments.editorExperiment)('single_column_layouts', true);
         if (pos !== null && !shouldHideToolbar) {
           return (0, _toolbar.buildToolbar)(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout, allowAdvancedSingleColumnLayout, api);
         }
         return undefined;
       },
-      quickInsert: function quickInsert(_ref4) {
-        var formatMessage = _ref4.formatMessage;
+      quickInsert: function quickInsert(_ref3) {
+        var formatMessage = _ref3.formatMessage;
         var withInsertLayoutAnalytics = function withInsertLayoutAnalytics(tr, columnCount) {
           var _api$analytics2;
           api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || (_api$analytics2 = _api$analytics2.actions) === null || _api$analytics2 === void 0 || _api$analytics2.attachAnalyticsEvent({
@@ -283,9 +286,17 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
         }
       }
     },
-    contentComponent: function contentComponent() {
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _experiments.editorExperiment)('advanced_layouts', true) ? /*#__PURE__*/_react.default.createElement(_globalStyles.GlobalStylesWrapper, null) : null, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true) ? /*#__PURE__*/_react.default.createElement(_LayoutColumnMenu.LayoutColumnMenu, {
-        api: api
+    contentComponent: function contentComponent(_ref4) {
+      var editorView = _ref4.editorView,
+        popupsMountPoint = _ref4.popupsMountPoint,
+        popupsBoundariesElement = _ref4.popupsBoundariesElement,
+        popupsScrollableElement = _ref4.popupsScrollableElement;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _experiments.editorExperiment)('advanced_layouts', true) ? /*#__PURE__*/_react.default.createElement(_globalStyles.GlobalStylesWrapper, null) : null, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true) && editorView ? /*#__PURE__*/_react.default.createElement(_LayoutColumnMenu.LayoutColumnMenu, {
+        api: api,
+        editorView: editorView,
+        mountTo: popupsMountPoint,
+        boundariesElement: popupsBoundariesElement,
+        scrollableElement: popupsScrollableElement
       }) : null);
     },
     getSharedState: function getSharedState(editorState) {

package/dist/cjs/ui/LayoutColumnMenu/components.js

@@ -8,6 +8,7 @@ exports.getLayoutColumnMenuComponents = exports.LAYOUT_COLUMN_MENU_FALLBACKS = e
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _toolbarMenuContainer = require("@atlaskit/editor-toolbar/toolbar-menu-container");
 var _DistributeColumnsDropdownItem = require("./DistributeColumnsDropdownItem");
 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; }
@@ -33,7 +34,9 @@ var LAYOUT_COLUMN_MENU_FALLBACKS = exports.LAYOUT_COLUMN_MENU_FALLBACKS = {
 };
 var getLayoutColumnMenuComponents = exports.getLayoutColumnMenuComponents = function getLayoutColumnMenuComponents(_ref2) {
   var api = _ref2.api;
-  return [_objectSpread({}, LAYOUT_COLUMN_MENU), _objectSpread(_objectSpread({}, LAYOUT_COLUMN_MENU_SECTION), {}, {
+  return [_objectSpread(_objectSpread({}, LAYOUT_COLUMN_MENU), {}, {
+    component: _toolbarMenuContainer.ToolbarMenuContainer
+  }), _objectSpread(_objectSpread({}, LAYOUT_COLUMN_MENU_SECTION), {}, {
     parents: [_objectSpread(_objectSpread({}, LAYOUT_COLUMN_MENU), {}, {
       rank: LAYOUT_COLUMN_MENU_RANK[LAYOUT_COLUMN_MENU_SECTION.key]
     })]

package/dist/cjs/ui/LayoutColumnMenu/index.js

@@ -1,34 +1,91 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.LayoutColumnMenu = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _ui = require("@atlaskit/editor-common/ui");
+var _uiReact = require("@atlaskit/editor-common/ui-react");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _editorUiControlModel = require("@atlaskit/editor-ui-control-model");
 var _components = require("./components");
-var LayoutColumnMenu = exports.LayoutColumnMenu = function LayoutColumnMenu(_ref) {
+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 PopupWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_ui.Popup);
+var LAYOUT_COLUMN_MENU_POPUP_OFFSET = [0, 10];
+var getLayoutColumnMenuTarget = function getLayoutColumnMenuTarget(editorView, selectionAnchorPos) {
+  if (selectionAnchorPos === undefined) {
+    return null;
+  }
+  var selectionNode = editorView.state.doc.nodeAt(selectionAnchorPos);
+  if ((selectionNode === null || selectionNode === void 0 ? void 0 : selectionNode.type.name) !== 'layoutColumn') {
+    return null;
+  }
+  return (0, _utils.findDomRefAtPos)(selectionAnchorPos, editorView.domAtPos.bind(editorView));
+};
+var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.memo(function LayoutColumnMenu(_ref) {
   var _api$uiControlRegistr, _api$uiControlRegistr2;
-  var api = _ref.api;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['layout'], function (states) {
-      var _states$layoutState$i, _states$layoutState;
+  var api = _ref.api,
+    editorView = _ref.editorView,
+    mountTo = _ref.mountTo,
+    boundariesElement = _ref.boundariesElement,
+    scrollableElement = _ref.scrollableElement;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['layout', 'selection'], function (states) {
+      var _states$layoutState$i, _states$layoutState, _states$selectionStat;
       return {
-        isLayoutColumnMenuOpen: (_states$layoutState$i = (_states$layoutState = states.layoutState) === null || _states$layoutState === void 0 ? void 0 : _states$layoutState.isLayoutColumnMenuOpen) !== null && _states$layoutState$i !== void 0 ? _states$layoutState$i : false
+        isLayoutColumnMenuOpen: (_states$layoutState$i = (_states$layoutState = states.layoutState) === null || _states$layoutState === void 0 ? void 0 : _states$layoutState.isLayoutColumnMenuOpen) !== null && _states$layoutState$i !== void 0 ? _states$layoutState$i : false,
+        selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
       };
     }),
-    isLayoutColumnMenuOpen = _useSharedPluginState.isLayoutColumnMenuOpen;
-  if (!isLayoutColumnMenuOpen) {
-    return null;
-  }
+    isLayoutColumnMenuOpen = _useSharedPluginState.isLayoutColumnMenuOpen,
+    selection = _useSharedPluginState.selection;
+  var closeLayoutColumnMenu = (0, _react.useCallback)(function () {
+    var _api$core, _api$layout;
+    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.toggleLayoutColumnMenu({
+      isOpen: false
+    }));
+  }, [api]);
+  var handleSetIsOpen = (0, _react.useCallback)(function (isOpen) {
+    if (!isOpen) {
+      closeLayoutColumnMenu();
+    }
+  }, [closeLayoutColumnMenu]);
   var components = (_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(_components.LAYOUT_COLUMN_MENU.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
-  if (components.length === 0) {
+  var target = isLayoutColumnMenuOpen ? getLayoutColumnMenuTarget(editorView, selection === null || selection === void 0 ? void 0 : selection.from) : null;
+  var hasValidTarget = target instanceof HTMLElement;
+  (0, _react.useEffect)(function () {
+    if (isLayoutColumnMenuOpen && (!hasValidTarget || components.length === 0)) {
+      closeLayoutColumnMenu();
+    }
+  }, [closeLayoutColumnMenu, components.length, hasValidTarget, isLayoutColumnMenuOpen]);
+  if (!isLayoutColumnMenuOpen || components.length === 0 || !hasValidTarget) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement(_editorUiControlModel.SurfaceRenderer, {
+  return /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
+    target: target,
+    mountTo: mountTo,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    zIndex: _editorSharedStyles.akEditorFloatingPanelZIndex,
+    alignX: "center",
+    alignY: "top",
+    forcePlacement: true,
+    offset: LAYOUT_COLUMN_MENU_POPUP_OFFSET,
+    handleClickOutside: closeLayoutColumnMenu,
+    handleEscapeKeydown: closeLayoutColumnMenu
+  }, /*#__PURE__*/_react.default.createElement(_toolbar.EditorToolbarProvider, {
+    editorView: editorView
+  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenuProvider, {
+    isOpen: isLayoutColumnMenuOpen,
+    setIsOpen: handleSetIsOpen
+  }, /*#__PURE__*/_react.default.createElement(_editorUiControlModel.SurfaceRenderer, {
     components: components,
     fallbacks: _components.LAYOUT_COLUMN_MENU_FALLBACKS,
     surface: _components.LAYOUT_COLUMN_MENU
-  });
-};
+  }))));
+});

package/dist/es2019/layoutPlugin.js

@@ -110,13 +110,17 @@ export const layoutPlugin = ({
     },
     pluginsOptions: {
       floatingToolbar(state, intl) {
+        const layoutState = pluginKey.getState(state);
+        if (!layoutState) {
+          return undefined;
+        }
         const {
           pos,
           allowBreakout,
           addSidebarLayouts,
           allowSingleColumnLayout,
           isResizing
-        } = pluginKey.getState(state);
+        } = layoutState;
         const shouldHideToolbar = isResizing && editorExperiment('single_column_layouts', true);
         if (pos !== null && !shouldHideToolbar) {
           return buildToolbar(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout, allowAdvancedSingleColumnLayout, api);
@@ -262,9 +266,18 @@ export const layoutPlugin = ({
         }
       }
     },
-    contentComponent() {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, editorExperiment('advanced_layouts', true) ? /*#__PURE__*/React.createElement(GlobalStylesWrapper, null) : null, expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true) ? /*#__PURE__*/React.createElement(LayoutColumnMenu, {
-        api: api
+    contentComponent({
+      editorView,
+      popupsMountPoint,
+      popupsBoundariesElement,
+      popupsScrollableElement
+    }) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, editorExperiment('advanced_layouts', true) ? /*#__PURE__*/React.createElement(GlobalStylesWrapper, null) : null, expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true) && editorView ? /*#__PURE__*/React.createElement(LayoutColumnMenu, {
+        api: api,
+        editorView: editorView,
+        mountTo: popupsMountPoint,
+        boundariesElement: popupsBoundariesElement,
+        scrollableElement: popupsScrollableElement
       }) : null);
     },
     getSharedState(editorState) {

package/dist/es2019/ui/LayoutColumnMenu/components.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+import { ToolbarMenuContainer } from '@atlaskit/editor-toolbar/toolbar-menu-container';
 import { createDistributeColumnsDropdownItem } from './DistributeColumnsDropdownItem';
 export const LAYOUT_COLUMN_MENU = {
   key: 'layout-column-menu',
@@ -28,7 +29,8 @@ export const getLayoutColumnMenuComponents = ({
   api
 }) => {
   return [{
-    ...LAYOUT_COLUMN_MENU
+    ...LAYOUT_COLUMN_MENU,
+    component: ToolbarMenuContainer
   }, {
     ...LAYOUT_COLUMN_MENU_SECTION,
     parents: [{

package/dist/es2019/ui/LayoutColumnMenu/index.js

@@ -1,29 +1,85 @@
-import React from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { EditorToolbarProvider } from '@atlaskit/editor-common/toolbar';
+import { Popup } from '@atlaskit/editor-common/ui';
+import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
+import { ToolbarDropdownMenuProvider } from '@atlaskit/editor-toolbar';
 import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model';
 import { LAYOUT_COLUMN_MENU, LAYOUT_COLUMN_MENU_FALLBACKS } from './components';
-export const LayoutColumnMenu = ({
-  api
-}) => {
+const PopupWithListeners = withReactEditorViewOuterListeners(Popup);
+const LAYOUT_COLUMN_MENU_POPUP_OFFSET = [0, 10];
+const getLayoutColumnMenuTarget = (editorView, selectionAnchorPos) => {
+  if (selectionAnchorPos === undefined) {
+    return null;
+  }
+  const selectionNode = editorView.state.doc.nodeAt(selectionAnchorPos);
+  if ((selectionNode === null || selectionNode === void 0 ? void 0 : selectionNode.type.name) !== 'layoutColumn') {
+    return null;
+  }
+  return findDomRefAtPos(selectionAnchorPos, editorView.domAtPos.bind(editorView));
+};
+export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu({
+  api,
+  editorView,
+  mountTo,
+  boundariesElement,
+  scrollableElement
+}) {
   var _api$uiControlRegistr, _api$uiControlRegistr2;
   const {
-    isLayoutColumnMenuOpen
-  } = useSharedPluginStateWithSelector(api, ['layout'], states => {
-    var _states$layoutState$i, _states$layoutState;
+    isLayoutColumnMenuOpen,
+    selection
+  } = useSharedPluginStateWithSelector(api, ['layout', 'selection'], states => {
+    var _states$layoutState$i, _states$layoutState, _states$selectionStat;
     return {
-      isLayoutColumnMenuOpen: (_states$layoutState$i = (_states$layoutState = states.layoutState) === null || _states$layoutState === void 0 ? void 0 : _states$layoutState.isLayoutColumnMenuOpen) !== null && _states$layoutState$i !== void 0 ? _states$layoutState$i : false
+      isLayoutColumnMenuOpen: (_states$layoutState$i = (_states$layoutState = states.layoutState) === null || _states$layoutState === void 0 ? void 0 : _states$layoutState.isLayoutColumnMenuOpen) !== null && _states$layoutState$i !== void 0 ? _states$layoutState$i : false,
+      selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
     };
   });
-  if (!isLayoutColumnMenuOpen) {
-    return null;
-  }
+  const closeLayoutColumnMenu = useCallback(() => {
+    var _api$core, _api$layout;
+    api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.toggleLayoutColumnMenu({
+      isOpen: false
+    }));
+  }, [api]);
+  const handleSetIsOpen = useCallback(isOpen => {
+    if (!isOpen) {
+      closeLayoutColumnMenu();
+    }
+  }, [closeLayoutColumnMenu]);
   const components = (_api$uiControlRegistr = api === null || api === void 0 ? void 0 : (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(LAYOUT_COLUMN_MENU.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
-  if (components.length === 0) {
+  const target = isLayoutColumnMenuOpen ? getLayoutColumnMenuTarget(editorView, selection === null || selection === void 0 ? void 0 : selection.from) : null;
+  const hasValidTarget = target instanceof HTMLElement;
+  useEffect(() => {
+    if (isLayoutColumnMenuOpen && (!hasValidTarget || components.length === 0)) {
+      closeLayoutColumnMenu();
+    }
+  }, [closeLayoutColumnMenu, components.length, hasValidTarget, isLayoutColumnMenuOpen]);
+  if (!isLayoutColumnMenuOpen || components.length === 0 || !hasValidTarget) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(SurfaceRenderer, {
+  return /*#__PURE__*/React.createElement(PopupWithListeners, {
+    target: target,
+    mountTo: mountTo,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    zIndex: akEditorFloatingPanelZIndex,
+    alignX: "center",
+    alignY: "top",
+    forcePlacement: true,
+    offset: LAYOUT_COLUMN_MENU_POPUP_OFFSET,
+    handleClickOutside: closeLayoutColumnMenu,
+    handleEscapeKeydown: closeLayoutColumnMenu
+  }, /*#__PURE__*/React.createElement(EditorToolbarProvider, {
+    editorView: editorView
+  }, /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, {
+    isOpen: isLayoutColumnMenuOpen,
+    setIsOpen: handleSetIsOpen
+  }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
     components: components,
     fallbacks: LAYOUT_COLUMN_MENU_FALLBACKS,
     surface: LAYOUT_COLUMN_MENU
-  });
-};
+  }))));
+});

package/dist/esm/layoutPlugin.js

@@ -114,20 +114,23 @@ export var layoutPlugin = function layoutPlugin(_ref) {
     },
     pluginsOptions: {
       floatingToolbar: function floatingToolbar(state, intl) {
-        var _ref3 = pluginKey.getState(state),
-          pos = _ref3.pos,
-          allowBreakout = _ref3.allowBreakout,
-          addSidebarLayouts = _ref3.addSidebarLayouts,
-          allowSingleColumnLayout = _ref3.allowSingleColumnLayout,
-          isResizing = _ref3.isResizing;
+        var layoutState = pluginKey.getState(state);
+        if (!layoutState) {
+          return undefined;
+        }
+        var pos = layoutState.pos,
+          allowBreakout = layoutState.allowBreakout,
+          addSidebarLayouts = layoutState.addSidebarLayouts,
+          allowSingleColumnLayout = layoutState.allowSingleColumnLayout,
+          isResizing = layoutState.isResizing;
         var shouldHideToolbar = isResizing && editorExperiment('single_column_layouts', true);
         if (pos !== null && !shouldHideToolbar) {
           return buildToolbar(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout, allowAdvancedSingleColumnLayout, api);
         }
         return undefined;
       },
-      quickInsert: function quickInsert(_ref4) {
-        var formatMessage = _ref4.formatMessage;
+      quickInsert: function quickInsert(_ref3) {
+        var formatMessage = _ref3.formatMessage;
         var withInsertLayoutAnalytics = function withInsertLayoutAnalytics(tr, columnCount) {
           var _api$analytics2;
           api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || (_api$analytics2 = _api$analytics2.actions) === null || _api$analytics2 === void 0 || _api$analytics2.attachAnalyticsEvent({
@@ -276,9 +279,17 @@ export var layoutPlugin = function layoutPlugin(_ref) {
         }
       }
     },
-    contentComponent: function contentComponent() {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, editorExperiment('advanced_layouts', true) ? /*#__PURE__*/React.createElement(GlobalStylesWrapper, null) : null, expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true) ? /*#__PURE__*/React.createElement(LayoutColumnMenu, {
-        api: api
+    contentComponent: function contentComponent(_ref4) {
+      var editorView = _ref4.editorView,
+        popupsMountPoint = _ref4.popupsMountPoint,
+        popupsBoundariesElement = _ref4.popupsBoundariesElement,
+        popupsScrollableElement = _ref4.popupsScrollableElement;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, editorExperiment('advanced_layouts', true) ? /*#__PURE__*/React.createElement(GlobalStylesWrapper, null) : null, expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true) && editorView ? /*#__PURE__*/React.createElement(LayoutColumnMenu, {
+        api: api,
+        editorView: editorView,
+        mountTo: popupsMountPoint,
+        boundariesElement: popupsBoundariesElement,
+        scrollableElement: popupsScrollableElement
       }) : null);
     },
     getSharedState: function getSharedState(editorState) {

package/dist/esm/ui/LayoutColumnMenu/components.js

@@ -3,6 +3,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
 import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+import { ToolbarMenuContainer } from '@atlaskit/editor-toolbar/toolbar-menu-container';
 import { createDistributeColumnsDropdownItem } from './DistributeColumnsDropdownItem';
 export var LAYOUT_COLUMN_MENU = {
   key: 'layout-column-menu',
@@ -26,7 +27,9 @@ export var LAYOUT_COLUMN_MENU_FALLBACKS = {
 };
 export var getLayoutColumnMenuComponents = function getLayoutColumnMenuComponents(_ref2) {
   var api = _ref2.api;
-  return [_objectSpread({}, LAYOUT_COLUMN_MENU), _objectSpread(_objectSpread({}, LAYOUT_COLUMN_MENU_SECTION), {}, {
+  return [_objectSpread(_objectSpread({}, LAYOUT_COLUMN_MENU), {}, {
+    component: ToolbarMenuContainer
+  }), _objectSpread(_objectSpread({}, LAYOUT_COLUMN_MENU_SECTION), {}, {
     parents: [_objectSpread(_objectSpread({}, LAYOUT_COLUMN_MENU), {}, {
       rank: LAYOUT_COLUMN_MENU_RANK[LAYOUT_COLUMN_MENU_SECTION.key]
     })]

package/dist/esm/ui/LayoutColumnMenu/index.js

@@ -1,27 +1,83 @@
-import React from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { EditorToolbarProvider } from '@atlaskit/editor-common/toolbar';
+import { Popup } from '@atlaskit/editor-common/ui';
+import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
+import { ToolbarDropdownMenuProvider } from '@atlaskit/editor-toolbar';
 import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model';
 import { LAYOUT_COLUMN_MENU, LAYOUT_COLUMN_MENU_FALLBACKS } from './components';
-export var LayoutColumnMenu = function LayoutColumnMenu(_ref) {
+var PopupWithListeners = withReactEditorViewOuterListeners(Popup);
+var LAYOUT_COLUMN_MENU_POPUP_OFFSET = [0, 10];
+var getLayoutColumnMenuTarget = function getLayoutColumnMenuTarget(editorView, selectionAnchorPos) {
+  if (selectionAnchorPos === undefined) {
+    return null;
+  }
+  var selectionNode = editorView.state.doc.nodeAt(selectionAnchorPos);
+  if ((selectionNode === null || selectionNode === void 0 ? void 0 : selectionNode.type.name) !== 'layoutColumn') {
+    return null;
+  }
+  return findDomRefAtPos(selectionAnchorPos, editorView.domAtPos.bind(editorView));
+};
+export var LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu(_ref) {
   var _api$uiControlRegistr, _api$uiControlRegistr2;
-  var api = _ref.api;
-  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['layout'], function (states) {
-      var _states$layoutState$i, _states$layoutState;
+  var api = _ref.api,
+    editorView = _ref.editorView,
+    mountTo = _ref.mountTo,
+    boundariesElement = _ref.boundariesElement,
+    scrollableElement = _ref.scrollableElement;
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['layout', 'selection'], function (states) {
+      var _states$layoutState$i, _states$layoutState, _states$selectionStat;
       return {
-        isLayoutColumnMenuOpen: (_states$layoutState$i = (_states$layoutState = states.layoutState) === null || _states$layoutState === void 0 ? void 0 : _states$layoutState.isLayoutColumnMenuOpen) !== null && _states$layoutState$i !== void 0 ? _states$layoutState$i : false
+        isLayoutColumnMenuOpen: (_states$layoutState$i = (_states$layoutState = states.layoutState) === null || _states$layoutState === void 0 ? void 0 : _states$layoutState.isLayoutColumnMenuOpen) !== null && _states$layoutState$i !== void 0 ? _states$layoutState$i : false,
+        selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
       };
     }),
-    isLayoutColumnMenuOpen = _useSharedPluginState.isLayoutColumnMenuOpen;
-  if (!isLayoutColumnMenuOpen) {
-    return null;
-  }
+    isLayoutColumnMenuOpen = _useSharedPluginState.isLayoutColumnMenuOpen,
+    selection = _useSharedPluginState.selection;
+  var closeLayoutColumnMenu = useCallback(function () {
+    var _api$core, _api$layout;
+    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.toggleLayoutColumnMenu({
+      isOpen: false
+    }));
+  }, [api]);
+  var handleSetIsOpen = useCallback(function (isOpen) {
+    if (!isOpen) {
+      closeLayoutColumnMenu();
+    }
+  }, [closeLayoutColumnMenu]);
   var components = (_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(LAYOUT_COLUMN_MENU.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
-  if (components.length === 0) {
+  var target = isLayoutColumnMenuOpen ? getLayoutColumnMenuTarget(editorView, selection === null || selection === void 0 ? void 0 : selection.from) : null;
+  var hasValidTarget = target instanceof HTMLElement;
+  useEffect(function () {
+    if (isLayoutColumnMenuOpen && (!hasValidTarget || components.length === 0)) {
+      closeLayoutColumnMenu();
+    }
+  }, [closeLayoutColumnMenu, components.length, hasValidTarget, isLayoutColumnMenuOpen]);
+  if (!isLayoutColumnMenuOpen || components.length === 0 || !hasValidTarget) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(SurfaceRenderer, {
+  return /*#__PURE__*/React.createElement(PopupWithListeners, {
+    target: target,
+    mountTo: mountTo,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    zIndex: akEditorFloatingPanelZIndex,
+    alignX: "center",
+    alignY: "top",
+    forcePlacement: true,
+    offset: LAYOUT_COLUMN_MENU_POPUP_OFFSET,
+    handleClickOutside: closeLayoutColumnMenu,
+    handleEscapeKeydown: closeLayoutColumnMenu
+  }, /*#__PURE__*/React.createElement(EditorToolbarProvider, {
+    editorView: editorView
+  }, /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, {
+    isOpen: isLayoutColumnMenuOpen,
+    setIsOpen: handleSetIsOpen
+  }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
     components: components,
     fallbacks: LAYOUT_COLUMN_MENU_FALLBACKS,
     surface: LAYOUT_COLUMN_MENU
-  });
-};
+  }))));
+});

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

@@ -1,8 +1,13 @@
 import React from 'react';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { LayoutPlugin } from '../../layoutPluginType';
 type LayoutColumnMenuProps = {
     api: ExtractInjectionAPI<LayoutPlugin> | undefined;
+    boundariesElement?: HTMLElement;
+    editorView: EditorView;
+    mountTo?: HTMLElement;
+    scrollableElement?: HTMLElement;
 };
-export declare const LayoutColumnMenu: ({ api }: LayoutColumnMenuProps) => React.JSX.Element | null;
+export declare const LayoutColumnMenu: React.NamedExoticComponent<LayoutColumnMenuProps>;
 export {};

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

@@ -1,8 +1,13 @@
 import React from 'react';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { LayoutPlugin } from '../../layoutPluginType';
 type LayoutColumnMenuProps = {
     api: ExtractInjectionAPI<LayoutPlugin> | undefined;
+    boundariesElement?: HTMLElement;
+    editorView: EditorView;
+    mountTo?: HTMLElement;
+    scrollableElement?: HTMLElement;
 };
-export declare const LayoutColumnMenu: ({ api }: LayoutColumnMenuProps) => React.JSX.Element | null;
+export declare const LayoutColumnMenu: React.NamedExoticComponent<LayoutColumnMenuProps>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-layout",
-	"version": "10.2.0",
+	"version": "10.3.1",
 	"description": "Layout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -37,18 +37,18 @@
 		"@atlaskit/editor-plugin-editor-disabled": "^10.1.0",
 		"@atlaskit/editor-plugin-guideline": "^10.1.0",
 		"@atlaskit/editor-plugin-interaction": "^19.1.0",
-		"@atlaskit/editor-plugin-selection": "^10.0.0",
-		"@atlaskit/editor-plugin-toolbar": "^7.2.0",
-		"@atlaskit/editor-plugin-ui-control-registry": "^4.0.0",
-		"@atlaskit/editor-plugin-width": "^11.0.0",
+		"@atlaskit/editor-plugin-selection": "^10.1.0",
+		"@atlaskit/editor-plugin-toolbar": "^7.3.0",
+		"@atlaskit/editor-plugin-ui-control-registry": "^4.1.0",
+		"@atlaskit/editor-plugin-width": "^11.1.0",
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/editor-shared-styles": "^3.10.0",
-		"@atlaskit/editor-toolbar": "^1.2.0",
+		"@atlaskit/editor-toolbar": "^1.3.0",
 		"@atlaskit/editor-ui-control-model": "^1.1.0",
 		"@atlaskit/icon": "^34.5.0",
 		"@atlaskit/icon-lab": "^6.9.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^80.0.0",
+		"@atlaskit/tmp-editor-statsig": "^80.1.0",
 		"@atlaskit/tokens": "^13.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",