@atlaskit/editor-plugin-layout 10.0.15 → 10.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-layout
 
+## 10.1.0
+
+### Minor Changes
+
+- [`2023cac0fd36f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2023cac0fd36f) -
+  Add column drag handle context menu placeholder, gated behind the
+  platform_editor_layout_column_menu experiment flag.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 10.0.15
 
 ### Patch Changes

package/dist/cjs/layoutPlugin.js

@@ -15,6 +15,7 @@ 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"));
@@ -22,8 +23,10 @@ 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 _LayoutColumnMenu = require("./ui/LayoutColumnMenu");
 var _toolbar = require("./ui/toolbar");
 var LAYOUT_SECTION_NODE_NAME = 'layoutSection';
+
 /**
  * This function is used to set the selection into
  * the first paragraph of the first column of a layout section.
@@ -274,7 +277,18 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
       }
     },
     contentComponent: function contentComponent() {
-      return (0, _experiments.editorExperiment)('advanced_layouts', true) ? /*#__PURE__*/_react.default.createElement(_globalStyles.GlobalStylesWrapper, null) : null;
+      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
+      }) : null);
+    },
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return undefined;
+      }
+      return _pluginKey.pluginKey.getState(editorState);
+    },
+    commands: {
+      toggleLayoutColumnMenu: _actions.toggleLayoutColumnMenu
     }
   };
 };

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.fixColumnStructure = exports.fixColumnSizes = exports.deleteActiveLayoutNode = exports.createMultiColumnLayoutSection = exports.createDefaultLayoutSection = exports.TWO_COL_LAYOUTS = exports.THREE_COL_LAYOUTS = exports.ONE_COL_LAYOUTS = void 0;
 exports.forceSectionToPresetLayout = forceSectionToPresetLayout;
-exports.setPresetLayout = exports.insertLayoutColumnsWithAnalytics = exports.insertLayoutColumns = exports.getSelectedLayout = exports.getPresetLayout = void 0;
+exports.toggleLayoutColumnMenu = exports.setPresetLayout = exports.insertLayoutColumnsWithAnalytics = exports.insertLayoutColumns = exports.getSelectedLayout = exports.getPresetLayout = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _editorAnalytics = require("@atlaskit/editor-common/editor-analytics");
@@ -547,4 +547,15 @@ var formatLayoutName = function formatLayoutName(layout) {
     case 'three_with_sidebars':
       return _analytics.LAYOUT_TYPE.THREE_WITH_SIDEBARS;
   }
+};
+var toggleLayoutColumnMenu = exports.toggleLayoutColumnMenu = function toggleLayoutColumnMenu(_ref4) {
+  var isOpen = _ref4.isOpen;
+  return function (_ref5) {
+    var tr = _ref5.tr;
+    tr.setMeta('toggleLayoutColumnMenu', {
+      isOpen: isOpen
+    });
+    tr.setMeta('scrollIntoView', false);
+    return tr;
+  };
 };

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

@@ -72,7 +72,8 @@ var getInitialPluginState = function getInitialPluginState(options, state) {
     addSidebarLayouts: addSidebarLayouts,
     selectedLayout: selectedLayout,
     allowSingleColumnLayout: allowSingleColumnLayout,
-    isResizing: false
+    isResizing: false,
+    isLayoutColumnMenuOpen: false
   };
 };
 
@@ -121,11 +122,15 @@ var _default = exports.default = function _default(options) {
         return getInitialPluginState(options, state);
       },
       apply: function apply(tr, pluginState, oldState, newState) {
-        var _tr$getMeta, _pluginKey$getState;
+        var _columnMenuMeta$isOpe, _tr$getMeta, _pluginKey$getState;
+        var columnMenuMeta = tr.getMeta('toggleLayoutColumnMenu');
+        var nextPluginState = columnMenuMeta ? _objectSpread(_objectSpread({}, pluginState), {}, {
+          isLayoutColumnMenuOpen: (_columnMenuMeta$isOpe = columnMenuMeta.isOpen) !== null && _columnMenuMeta$isOpe !== void 0 ? _columnMenuMeta$isOpe : !pluginState.isLayoutColumnMenuOpen
+        }) : pluginState;
         var isResizing = (0, _experiments.editorExperiment)('single_column_layouts', true) ? (_tr$getMeta = tr.getMeta('is-resizer-resizing')) !== null && _tr$getMeta !== void 0 ? _tr$getMeta : (_pluginKey$getState = _pluginKey.pluginKey.getState(oldState)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.isResizing : false;
         if (tr.docChanged || tr.selectionSet) {
           var maybeLayoutSection = (0, _utils3.getMaybeLayoutSection)(newState);
-          var newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
+          var newPluginState = _objectSpread(_objectSpread({}, nextPluginState), {}, {
             pos: maybeLayoutSection ? maybeLayoutSection.pos : null,
             isResizing: isResizing,
             selectedLayout: (0, _actions.getSelectedLayout)(maybeLayoutSection && maybeLayoutSection.node,
@@ -135,7 +140,7 @@ var _default = exports.default = function _default(options) {
           });
           return newPluginState;
         }
-        return _objectSpread(_objectSpread({}, pluginState), {}, {
+        return _objectSpread(_objectSpread({}, nextPluginState), {}, {
           isResizing: isResizing
         });
       }

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

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LayoutColumnMenu = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _hooks = require("@atlaskit/editor-common/hooks");
+var LayoutColumnMenu = exports.LayoutColumnMenu = function LayoutColumnMenu(_ref) {
+  var api = _ref.api;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['layout'], function (states) {
+      var _states$layoutState$i, _states$layoutState;
+      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 = _useSharedPluginState.isLayoutColumnMenuOpen;
+  if (!isLayoutColumnMenuOpen) {
+    return null;
+  }
+  var placeholder = 'Mock Layout Column Menu';
+  return /*#__PURE__*/_react.default.createElement("div", null, placeholder);
+};

package/dist/es2019/layoutPlugin.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { layoutColumn, layoutSection, layoutColumnWithLocalId, layoutSectionWithLocalId } from '@atlaskit/adf-schema';
+import { layoutColumn, layoutColumnWithLocalId, layoutSection, 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 { TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM, TRANSFORM_STRUCTURE_MENU_SECTION, TRANSFORM_STRUCTURE_MENU_SECTION_RANK } from '@atlaskit/editor-common/block-menu';
@@ -8,15 +8,17 @@ import { IconFiveColumnLayout, IconFourColumnLayout, IconLayout, IconOneColumnLa
 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';
-const LAYOUT_SECTION_NODE_NAME = 'layoutSection';
-import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayoutColumnsWithAnalytics } from './pm-plugins/actions';
+import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayoutColumnsWithAnalytics, toggleLayoutColumnMenu } 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 { LayoutColumnMenu } from './ui/LayoutColumnMenu';
 import { buildToolbar } from './ui/toolbar';
+const LAYOUT_SECTION_NODE_NAME = 'layoutSection';
 
 /**
  * This function is used to set the selection into
@@ -254,7 +256,18 @@ export const layoutPlugin = ({
       }
     },
     contentComponent() {
-      return editorExperiment('advanced_layouts', true) ? /*#__PURE__*/React.createElement(GlobalStylesWrapper, null) : null;
+      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
+      }) : null);
+    },
+    getSharedState(editorState) {
+      if (!editorState) {
+        return undefined;
+      }
+      return pluginKey.getState(editorState);
+    },
+    commands: {
+      toggleLayoutColumnMenu
     }
   };
 };

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

@@ -1,4 +1,4 @@
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, LAYOUT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, LAYOUT_TYPE } from '@atlaskit/editor-common/analytics';
 import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
 import { flatmap, getStepRange, isEmptyDocument, mapChildren } from '@atlaskit/editor-common/utils';
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
@@ -524,4 +524,15 @@ const formatLayoutName = layout => {
     case 'three_with_sidebars':
       return LAYOUT_TYPE.THREE_WITH_SIDEBARS;
   }
+};
+export const toggleLayoutColumnMenu = ({
+  isOpen
+}) => ({
+  tr
+}) => {
+  tr.setMeta('toggleLayoutColumnMenu', {
+    isOpen
+  });
+  tr.setMeta('scrollIntoView', false);
+  return tr;
 };

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

@@ -66,7 +66,8 @@ const getInitialPluginState = (options, state) => {
     addSidebarLayouts,
     selectedLayout,
     allowSingleColumnLayout,
-    isResizing: false
+    isResizing: false,
+    isLayoutColumnMenuOpen: false
   };
 };
 
@@ -113,12 +114,17 @@ export default (options => {
     state: {
       init: (_, state) => getInitialPluginState(options, state),
       apply: (tr, pluginState, oldState, newState) => {
-        var _tr$getMeta, _pluginKey$getState;
+        var _columnMenuMeta$isOpe, _tr$getMeta, _pluginKey$getState;
+        const columnMenuMeta = tr.getMeta('toggleLayoutColumnMenu');
+        const nextPluginState = columnMenuMeta ? {
+          ...pluginState,
+          isLayoutColumnMenuOpen: (_columnMenuMeta$isOpe = columnMenuMeta.isOpen) !== null && _columnMenuMeta$isOpe !== void 0 ? _columnMenuMeta$isOpe : !pluginState.isLayoutColumnMenuOpen
+        } : pluginState;
         const isResizing = editorExperiment('single_column_layouts', true) ? (_tr$getMeta = tr.getMeta('is-resizer-resizing')) !== null && _tr$getMeta !== void 0 ? _tr$getMeta : (_pluginKey$getState = pluginKey.getState(oldState)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.isResizing : false;
         if (tr.docChanged || tr.selectionSet) {
           const maybeLayoutSection = getMaybeLayoutSection(newState);
           const newPluginState = {
-            ...pluginState,
+            ...nextPluginState,
             pos: maybeLayoutSection ? maybeLayoutSection.pos : null,
             isResizing,
             selectedLayout: getSelectedLayout(maybeLayoutSection && maybeLayoutSection.node,
@@ -129,7 +135,7 @@ export default (options => {
           return newPluginState;
         }
         return {
-          ...pluginState,
+          ...nextPluginState,
           isResizing
         };
       }

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+export const LayoutColumnMenu = ({
+  api
+}) => {
+  const {
+    isLayoutColumnMenuOpen
+  } = useSharedPluginStateWithSelector(api, ['layout'], states => {
+    var _states$layoutState$i, _states$layoutState;
+    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
+    };
+  });
+  if (!isLayoutColumnMenuOpen) {
+    return null;
+  }
+  const placeholder = 'Mock Layout Column Menu';
+  return /*#__PURE__*/React.createElement("div", null, placeholder);
+};

package/dist/esm/layoutPlugin.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { layoutColumn, layoutSection, layoutColumnWithLocalId, layoutSectionWithLocalId } from '@atlaskit/adf-schema';
+import { layoutColumn, layoutColumnWithLocalId, layoutSection, 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 { TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM, TRANSFORM_STRUCTURE_MENU_SECTION, TRANSFORM_STRUCTURE_MENU_SECTION_RANK } from '@atlaskit/editor-common/block-menu';
@@ -8,15 +8,17 @@ import { IconFiveColumnLayout, IconFourColumnLayout, IconLayout, IconOneColumnLa
 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';
-var LAYOUT_SECTION_NODE_NAME = 'layoutSection';
-import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayoutColumnsWithAnalytics } from './pm-plugins/actions';
+import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayoutColumnsWithAnalytics, toggleLayoutColumnMenu } 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 { LayoutColumnMenu } from './ui/LayoutColumnMenu';
 import { buildToolbar } from './ui/toolbar';
+var LAYOUT_SECTION_NODE_NAME = 'layoutSection';
 
 /**
  * This function is used to set the selection into
@@ -268,7 +270,18 @@ export var layoutPlugin = function layoutPlugin(_ref) {
       }
     },
     contentComponent: function contentComponent() {
-      return editorExperiment('advanced_layouts', true) ? /*#__PURE__*/React.createElement(GlobalStylesWrapper, null) : null;
+      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
+      }) : null);
+    },
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return undefined;
+      }
+      return pluginKey.getState(editorState);
+    },
+    commands: {
+      toggleLayoutColumnMenu: toggleLayoutColumnMenu
     }
   };
 };

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

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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 { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, LAYOUT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, LAYOUT_TYPE } from '@atlaskit/editor-common/analytics';
 import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
 import { flatmap, getStepRange, isEmptyDocument, mapChildren } from '@atlaskit/editor-common/utils';
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
@@ -538,4 +538,15 @@ var formatLayoutName = function formatLayoutName(layout) {
     case 'three_with_sidebars':
       return LAYOUT_TYPE.THREE_WITH_SIDEBARS;
   }
+};
+export var toggleLayoutColumnMenu = function toggleLayoutColumnMenu(_ref4) {
+  var isOpen = _ref4.isOpen;
+  return function (_ref5) {
+    var tr = _ref5.tr;
+    tr.setMeta('toggleLayoutColumnMenu', {
+      isOpen: isOpen
+    });
+    tr.setMeta('scrollIntoView', false);
+    return tr;
+  };
 };

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

@@ -65,7 +65,8 @@ var getInitialPluginState = function getInitialPluginState(options, state) {
     addSidebarLayouts: addSidebarLayouts,
     selectedLayout: selectedLayout,
     allowSingleColumnLayout: allowSingleColumnLayout,
-    isResizing: false
+    isResizing: false,
+    isLayoutColumnMenuOpen: false
   };
 };
 
@@ -114,11 +115,15 @@ export default (function (options) {
         return getInitialPluginState(options, state);
       },
       apply: function apply(tr, pluginState, oldState, newState) {
-        var _tr$getMeta, _pluginKey$getState;
+        var _columnMenuMeta$isOpe, _tr$getMeta, _pluginKey$getState;
+        var columnMenuMeta = tr.getMeta('toggleLayoutColumnMenu');
+        var nextPluginState = columnMenuMeta ? _objectSpread(_objectSpread({}, pluginState), {}, {
+          isLayoutColumnMenuOpen: (_columnMenuMeta$isOpe = columnMenuMeta.isOpen) !== null && _columnMenuMeta$isOpe !== void 0 ? _columnMenuMeta$isOpe : !pluginState.isLayoutColumnMenuOpen
+        }) : pluginState;
         var isResizing = editorExperiment('single_column_layouts', true) ? (_tr$getMeta = tr.getMeta('is-resizer-resizing')) !== null && _tr$getMeta !== void 0 ? _tr$getMeta : (_pluginKey$getState = pluginKey.getState(oldState)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.isResizing : false;
         if (tr.docChanged || tr.selectionSet) {
           var maybeLayoutSection = getMaybeLayoutSection(newState);
-          var newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
+          var newPluginState = _objectSpread(_objectSpread({}, nextPluginState), {}, {
             pos: maybeLayoutSection ? maybeLayoutSection.pos : null,
             isResizing: isResizing,
             selectedLayout: getSelectedLayout(maybeLayoutSection && maybeLayoutSection.node,
@@ -128,7 +133,7 @@ export default (function (options) {
           });
           return newPluginState;
         }
-        return _objectSpread(_objectSpread({}, pluginState), {}, {
+        return _objectSpread(_objectSpread({}, nextPluginState), {}, {
           isResizing: isResizing
         });
       }

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+export var LayoutColumnMenu = function LayoutColumnMenu(_ref) {
+  var api = _ref.api;
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['layout'], function (states) {
+      var _states$layoutState$i, _states$layoutState;
+      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 = _useSharedPluginState.isLayoutColumnMenuOpen;
+  if (!isLayoutColumnMenuOpen) {
+    return null;
+  }
+  var placeholder = 'Mock Layout Column Menu';
+  return /*#__PURE__*/React.createElement("div", null, placeholder);
+};

package/dist/types/layoutPluginType.d.ts

@@ -8,7 +8,8 @@ import type { InteractionPlugin } from '@atlaskit/editor-plugin-interaction';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
-import type { insertLayoutColumnsWithAnalytics } from './pm-plugins/actions';
+import type { insertLayoutColumnsWithAnalytics, toggleLayoutColumnMenu } from './pm-plugins/actions';
+import type { LayoutState } from './pm-plugins/types';
 import type { LayoutPluginOptions } from './types';
 export type LayoutPluginDependencies = [
     DecorationsPlugin,
@@ -25,6 +26,10 @@ export type LayoutPlugin = NextEditorPlugin<'layout', {
     actions: {
         insertLayoutColumns: ReturnType<typeof insertLayoutColumnsWithAnalytics>;
     };
+    commands: {
+        toggleLayoutColumnMenu: typeof toggleLayoutColumnMenu;
+    };
     dependencies: LayoutPluginDependencies;
     pluginConfiguration: LayoutPluginOptions | undefined;
+    sharedState: LayoutState | undefined;
 }>;

package/dist/types/pm-plugins/actions.d.ts

@@ -1,6 +1,6 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import type { Command, TOOLBAR_MENU_TYPE } from '@atlaskit/editor-common/types';
+import type { Command, EditorCommand, TOOLBAR_MENU_TYPE } from '@atlaskit/editor-common/types';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { Change, PresetLayout } from '../types';
@@ -26,3 +26,6 @@ export declare const setPresetLayout: (editorAnalyticsAPI: EditorAnalyticsAPI |
 export declare const fixColumnSizes: (changedTr: Transaction, state: EditorState) => Change | undefined;
 export declare const fixColumnStructure: (state: EditorState) => Transaction | undefined;
 export declare const deleteActiveLayoutNode: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, inputMethod?: INPUT_METHOD.FLOATING_TB) => Command;
+export declare const toggleLayoutColumnMenu: ({ isOpen }: {
+    isOpen?: boolean;
+}) => EditorCommand;

package/dist/types/pm-plugins/types.d.ts

@@ -4,6 +4,7 @@ export type LayoutState = {
     addSidebarLayouts: boolean;
     allowBreakout: boolean;
     allowSingleColumnLayout: boolean;
+    isLayoutColumnMenuOpen: boolean;
     isResizing: boolean;
     pos: number | null;
     selectedLayout: PresetLayout | undefined;

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

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

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

@@ -8,7 +8,8 @@ import type { InteractionPlugin } from '@atlaskit/editor-plugin-interaction';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
-import type { insertLayoutColumnsWithAnalytics } from './pm-plugins/actions';
+import type { insertLayoutColumnsWithAnalytics, toggleLayoutColumnMenu } from './pm-plugins/actions';
+import type { LayoutState } from './pm-plugins/types';
 import type { LayoutPluginOptions } from './types';
 export type LayoutPluginDependencies = [
     DecorationsPlugin,
@@ -25,6 +26,10 @@ export type LayoutPlugin = NextEditorPlugin<'layout', {
     actions: {
         insertLayoutColumns: ReturnType<typeof insertLayoutColumnsWithAnalytics>;
     };
+    commands: {
+        toggleLayoutColumnMenu: typeof toggleLayoutColumnMenu;
+    };
     dependencies: LayoutPluginDependencies;
     pluginConfiguration: LayoutPluginOptions | undefined;
+    sharedState: LayoutState | undefined;
 }>;

package/dist/types-ts4.5/pm-plugins/actions.d.ts

@@ -1,6 +1,6 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import type { Command, TOOLBAR_MENU_TYPE } from '@atlaskit/editor-common/types';
+import type { Command, EditorCommand, TOOLBAR_MENU_TYPE } from '@atlaskit/editor-common/types';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { Change, PresetLayout } from '../types';
@@ -26,3 +26,6 @@ export declare const setPresetLayout: (editorAnalyticsAPI: EditorAnalyticsAPI |
 export declare const fixColumnSizes: (changedTr: Transaction, state: EditorState) => Change | undefined;
 export declare const fixColumnStructure: (state: EditorState) => Transaction | undefined;
 export declare const deleteActiveLayoutNode: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, inputMethod?: INPUT_METHOD.FLOATING_TB) => Command;
+export declare const toggleLayoutColumnMenu: ({ isOpen }: {
+    isOpen?: boolean;
+}) => EditorCommand;

package/dist/types-ts4.5/pm-plugins/types.d.ts

@@ -4,6 +4,7 @@ export type LayoutState = {
     addSidebarLayouts: boolean;
     allowBreakout: boolean;
     allowSingleColumnLayout: boolean;
+    isLayoutColumnMenuOpen: boolean;
     isResizing: boolean;
     pos: number | null;
     selectedLayout: PresetLayout | undefined;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-layout",
-	"version": "10.0.15",
+	"version": "10.1.0",
 	"description": "Layout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -46,14 +46,14 @@
 		"@atlaskit/icon": "^34.4.0",
 		"@atlaskit/icon-lab": "^6.7.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^77.0.0",
+		"@atlaskit/tmp-editor-statsig": "^77.3.0",
 		"@atlaskit/tokens": "^13.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^114.20.0",
+		"@atlaskit/editor-common": "^114.26.0",
 		"react": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},