@atlaskit/editor-plugin-layout 10.4.0 → 10.6.0

package/dist/esm/pm-plugins/utils/layout-column-selection.js

@@ -0,0 +1,122 @@
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+var isLayoutColumn = function isLayoutColumn(node) {
+  return (node === null || node === void 0 ? void 0 : node.type.name) === 'layoutColumn';
+};
+var isLayoutSection = function isLayoutSection(node) {
+  return (node === null || node === void 0 ? void 0 : node.type.name) === 'layoutSection';
+};
+var getLayoutColumnIndexAtPos = function getLayoutColumnIndexAtPos($pos) {
+  for (var depth = $pos.depth; depth > 0; depth--) {
+    if (isLayoutColumn($pos.node(depth)) && isLayoutSection($pos.node(depth - 1))) {
+      return $pos.index(depth - 1);
+    }
+  }
+  return undefined;
+};
+var getLayoutSectionDepth = function getLayoutSectionDepth(selection) {
+  var $from = selection.$from,
+    $to = selection.$to;
+  var sharedDepth = $from.sharedDepth($to.pos);
+  for (var depth = sharedDepth; depth > 0; depth--) {
+    if (isLayoutSection($from.node(depth))) {
+      return depth;
+    }
+  }
+  return undefined;
+};
+export var getSelectedLayoutColumns = function getSelectedLayoutColumns(selection) {
+  if (!selection) {
+    return undefined;
+  }
+  if (selection instanceof NodeSelection && isLayoutColumn(selection.node)) {
+    var _$from = selection.$from;
+    var _layoutSectionNode = _$from.parent;
+    if (!isLayoutSection(_layoutSectionNode)) {
+      return undefined;
+    }
+    var selectedColumnIndex = _$from.index(_$from.depth);
+    return {
+      layoutSectionNode: _layoutSectionNode,
+      layoutSectionPos: _$from.before(_$from.depth),
+      selectedColumnIndices: [selectedColumnIndex],
+      selectedColumns: [{
+        index: selectedColumnIndex,
+        node: selection.node,
+        pos: selection.from
+      }]
+    };
+  }
+  if (selection.empty) {
+    return undefined;
+  }
+  if (!editorExperiment('platform_editor_block_menu', true)) {
+    return undefined;
+  }
+  var layoutSectionDepth = getLayoutSectionDepth(selection);
+  if (layoutSectionDepth === undefined) {
+    return undefined;
+  }
+  var $from = selection.$from,
+    $to = selection.$to;
+  var layoutSectionNode = $from.node(layoutSectionDepth);
+  var layoutSectionPos = $from.before(layoutSectionDepth);
+  var selectedColumns = [];
+  var invalidSelection = false;
+  layoutSectionNode.forEach(function (column, offset, index) {
+    var columnStart = layoutSectionPos + 1 + offset;
+    var columnEnd = columnStart + column.nodeSize;
+    var intersectsColumn = selection.from < columnEnd && selection.to > columnStart;
+    if (!intersectsColumn) {
+      return;
+    }
+    if (!isLayoutColumn(column)) {
+      invalidSelection = true;
+      return;
+    }
+    selectedColumns.push({
+      index: index,
+      node: column,
+      pos: columnStart
+    });
+  });
+
+  // TextSelection inside a single column is normal text editing, not a selected column set.
+  if (invalidSelection || selectedColumns.length < 2) {
+    return undefined;
+  }
+  var firstColumn = selectedColumns[0];
+  var lastColumn = selectedColumns[selectedColumns.length - 1];
+  var startColumnIndex = getLayoutColumnIndexAtPos($from);
+  var endColumnIndex = getLayoutColumnIndexAtPos($to);
+  if (startColumnIndex !== undefined && startColumnIndex !== firstColumn.index || endColumnIndex !== undefined && endColumnIndex !== lastColumn.index) {
+    return undefined;
+  }
+  return {
+    layoutSectionNode: layoutSectionNode,
+    layoutSectionPos: layoutSectionPos,
+    selectedColumnIndices: selectedColumns.map(function (_ref) {
+      var index = _ref.index;
+      return index;
+    }),
+    selectedColumns: selectedColumns
+  };
+};
+export var getLayoutSectionColumnCount = function getLayoutSectionColumnCount(layoutSection) {
+  return (layoutSection === null || layoutSection === void 0 ? void 0 : layoutSection.type.name) === 'layoutSection' ? layoutSection.childCount : 0;
+};
+export var getLayoutColumnValign = function getLayoutColumnValign(layoutColumn) {
+  return layoutColumn === null || layoutColumn === void 0 ? void 0 : layoutColumn.attrs.valign;
+};
+export var getLayoutColumnMenuAnchorPos = function getLayoutColumnMenuAnchorPos(selection, anchorPosFromHandle) {
+  var _clickedSelectedColum, _selectedLayoutColumn;
+  var selectedLayoutColumns = getSelectedLayoutColumns(selection);
+  if (!selectedLayoutColumns) {
+    return undefined;
+  }
+  var clickedSelectedColumn = selectedLayoutColumns.selectedColumns.find(function (_ref2) {
+    var pos = _ref2.pos;
+    return pos === anchorPosFromHandle;
+  });
+  return (_clickedSelectedColum = clickedSelectedColumn === null || clickedSelectedColumn === void 0 ? void 0 : clickedSelectedColumn.pos) !== null && _clickedSelectedColum !== void 0 ? _clickedSelectedColum : (_selectedLayoutColumn = selectedLayoutColumns.selectedColumns[0]) === null || _selectedLayoutColumn === void 0 ? void 0 : _selectedLayoutColumn.pos;
+};

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

@@ -2,12 +2,12 @@ import React, { useCallback } from 'react';
 import { useIntl } from 'react-intl';
 import { layoutMessages } from '@atlaskit/editor-common/messages';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
-import { useCurrentLayoutColumn } from './useCurrentLayoutColumn';
+import { useSelectedLayoutColumns } from './useSelectedLayoutColumns';
 var DeleteColumnDropdownItem = function DeleteColumnDropdownItem(_ref) {
   var api = _ref.api;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  var currentColumn = useCurrentLayoutColumn(api);
+  var selectedLayoutColumns = useSelectedLayoutColumns(api);
   var onClick = useCallback(function () {
     var _api$layout, _api$core;
     var deleteCommand = api === null || api === void 0 || (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.deleteLayoutColumn;
@@ -25,11 +25,14 @@ var DeleteColumnDropdownItem = function DeleteColumnDropdownItem(_ref) {
       return tr;
     });
   }, [api]);
-  if (currentColumn === undefined) {
+  if (selectedLayoutColumns === undefined) {
     return null;
   }
+  var selectedColumnCount = selectedLayoutColumns.selectedColumns.length;
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     onClick: onClick
-  }, formatMessage(layoutMessages.deleteColumn));
+  }, formatMessage(layoutMessages.deleteColumn, {
+    count: selectedColumnCount
+  }));
 };
 export { DeleteColumnDropdownItem };

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

@@ -3,8 +3,8 @@ import { useIntl } from 'react-intl';
 import { layoutMessages } from '@atlaskit/editor-common/messages';
 import { TableColumnAddLeftIcon, TableColumnAddRightIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import { getEffectiveMaxLayoutColumns } from '../../pm-plugins/actions';
-import { getLayoutSectionColumnCount } from './layoutColumnSelection';
-import { useCurrentLayoutColumn, useCurrentLayoutSection } from './useCurrentLayoutColumn';
+import { getLayoutSectionColumnCount } from '../../pm-plugins/utils/layout-column-selection';
+import { useSelectedLayoutColumns } from './useSelectedLayoutColumns';
 var INSERT_COLUMN_OPTIONS = {
   left: {
     Icon: TableColumnAddLeftIcon,
@@ -25,11 +25,10 @@ export var InsertColumnDropdownItem = function InsertColumnDropdownItem(_ref) {
   var _INSERT_COLUMN_OPTION = INSERT_COLUMN_OPTIONS[side],
     Icon = _INSERT_COLUMN_OPTION.Icon,
     label = _INSERT_COLUMN_OPTION.label;
-  var currentColumn = useCurrentLayoutColumn(api);
-  var currentLayoutSection = useCurrentLayoutSection(api);
-  var columnCount = getLayoutSectionColumnCount(currentLayoutSection);
+  var selectedLayoutColumns = useSelectedLayoutColumns(api);
+  var columnCount = getLayoutSectionColumnCount(selectedLayoutColumns === null || selectedLayoutColumns === void 0 ? void 0 : selectedLayoutColumns.layoutSectionNode);
   var maxColumnCount = getEffectiveMaxLayoutColumns();
-  var canInsertColumn = currentColumn !== undefined && columnCount < maxColumnCount;
+  var canInsertColumn = selectedLayoutColumns !== undefined && columnCount < maxColumnCount;
   var onClick = useCallback(function () {
     var _api$layout, _api$core;
     var insertCommand = api === null || api === void 0 || (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.insertLayoutColumn(side);

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

@@ -1,19 +1,21 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
 import { useIntl } from 'react-intl';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
-import { getLayoutColumnValign } from './layoutColumnSelection';
-import { useCurrentLayoutColumn } from './useCurrentLayoutColumn';
+import { getLayoutColumnValign } from '../../pm-plugins/utils/layout-column-selection';
+import { useSelectedLayoutColumns } from './useSelectedLayoutColumns';
 import { VERTICAL_ALIGN_ICONS } from './verticalAlignIcons';
 export var VerticalAlignDropdownItem = function VerticalAlignDropdownItem(_ref) {
+  var _selectedLayoutColumn;
   var api = _ref.api,
     label = _ref.label,
     value = _ref.value;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  var currentColumn = useCurrentLayoutColumn(api);
-  var currentValign = useMemo(function () {
-    return getLayoutColumnValign(currentColumn);
-  }, [currentColumn]);
+  var selectedLayoutColumns = useSelectedLayoutColumns(api);
+  var isSelected = (_selectedLayoutColumn = selectedLayoutColumns === null || selectedLayoutColumns === void 0 ? void 0 : selectedLayoutColumns.selectedColumns.every(function (_ref2) {
+    var node = _ref2.node;
+    return getLayoutColumnValign(node) === value;
+  })) !== null && _selectedLayoutColumn !== void 0 ? _selectedLayoutColumn : false;
   var Icon = VERTICAL_ALIGN_ICONS[value];
   var onClick = useCallback(function () {
     var _api$core, _api$layout;
@@ -24,7 +26,7 @@ export var VerticalAlignDropdownItem = function VerticalAlignDropdownItem(_ref)
       label: "",
       size: "small"
     }),
-    isSelected: currentValign === value,
+    isSelected: isSelected,
     onClick: onClick
   }, formatMessage(label));
 };

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

@@ -2,20 +2,29 @@ import React, { useMemo } from 'react';
 import { useIntl } from 'react-intl';
 import { layoutMessages } from '@atlaskit/editor-common/messages';
 import { LayoutIcon, NestedDropdownRightIcon, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
-import { getLayoutColumnValign } from './layoutColumnSelection';
-import { useCurrentLayoutColumn } from './useCurrentLayoutColumn';
+import { getLayoutColumnValign } from '../../pm-plugins/utils/layout-column-selection';
+import { useSelectedLayoutColumns } from './useSelectedLayoutColumns';
 import { VERTICAL_ALIGN_ICONS } from './verticalAlignIcons';
 export var VerticalAlignNestedMenu = function VerticalAlignNestedMenu(_ref) {
   var api = _ref.api,
     children = _ref.children;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  var currentColumn = useCurrentLayoutColumn(api);
+  var selectedLayoutColumns = useSelectedLayoutColumns(api);
   var currentValign = useMemo(function () {
-    return getLayoutColumnValign(currentColumn);
-  }, [currentColumn]);
+    var selectedColumns = selectedLayoutColumns === null || selectedLayoutColumns === void 0 ? void 0 : selectedLayoutColumns.selectedColumns;
+    var firstColumn = selectedColumns === null || selectedColumns === void 0 ? void 0 : selectedColumns[0];
+    var firstValign = getLayoutColumnValign(firstColumn === null || firstColumn === void 0 ? void 0 : firstColumn.node);
+    if (!firstValign || !(selectedColumns !== null && selectedColumns !== void 0 && selectedColumns.every(function (_ref2) {
+      var node = _ref2.node;
+      return getLayoutColumnValign(node) === firstValign;
+    }))) {
+      return undefined;
+    }
+    return firstValign;
+  }, [selectedLayoutColumns]);
   var TriggerIcon = currentValign ? VERTICAL_ALIGN_ICONS[currentValign] : LayoutIcon;
-  if (!currentColumn) {
+  if (!selectedLayoutColumns) {
     return null;
   }
   return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {

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

@@ -8,9 +8,9 @@ import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { ToolbarDropdownMenuProvider } from '@atlaskit/editor-toolbar';
 import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model';
+import { getLayoutColumnMenuAnchorPos } from '../../pm-plugins/utils/layout-column-selection';
 import { LAYOUT_COLUMN_MENU_FALLBACKS } from './components';
 import { LAYOUT_COLUMN_MENU } from './keys';
-import { getLayoutColumnAtSelection } from './layoutColumnSelection';
 var PopupWithListeners = withReactEditorViewOuterListeners(Popup);
 var FALLBACK_MENU_HEIGHT = 300;
 var LAYOUT_COLUMN_MENU_POPUP_OFFSET = [0, 4];
@@ -18,12 +18,13 @@ var LAYOUT_COLUMN_MENU_POPUP_OFFSET = [0, 4];
 /**
  * Returns the drag handle button for the selected layout column.
  */
-var getLayoutColumnMenuTarget = function getLayoutColumnMenuTarget(editorView, selection) {
+var getLayoutColumnMenuTarget = function getLayoutColumnMenuTarget(editorView, selection, anchorPosFromHandle) {
   var _columnDomRef$parentE;
-  if (!getLayoutColumnAtSelection(selection) || (selection === null || selection === void 0 ? void 0 : selection.from) === undefined) {
+  var anchorPos = getLayoutColumnMenuAnchorPos(selection, anchorPosFromHandle);
+  if (anchorPos === undefined) {
     return null;
   }
-  var columnDomRef = editorView.nodeDOM(selection.from);
+  var columnDomRef = editorView.nodeDOM(anchorPos);
   if (!(columnDomRef instanceof HTMLElement)) {
     return null;
   }
@@ -38,13 +39,15 @@ export var LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu(
     boundariesElement = _ref.boundariesElement,
     scrollableElement = _ref.scrollableElement;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['layout', 'selection'], function (states) {
-      var _states$layoutState$i, _states$layoutState, _states$selectionStat;
+      var _states$layoutState$i, _states$layoutState, _states$layoutState2, _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,
+        layoutColumnMenuAnchorPos: (_states$layoutState2 = states.layoutState) === null || _states$layoutState2 === void 0 ? void 0 : _states$layoutState2.layoutColumnMenuAnchorPos,
         selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
       };
     }),
     isLayoutColumnMenuOpen = _useSharedPluginState.isLayoutColumnMenuOpen,
+    layoutColumnMenuAnchorPos = _useSharedPluginState.layoutColumnMenuAnchorPos,
     selection = _useSharedPluginState.selection;
   var setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
   var menuRef = useRef(null);
@@ -74,6 +77,13 @@ export var LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu(
     if (event.target instanceof Element && event.target.closest('[data-toolbar-nested-dropdown-menu]')) {
       return;
     }
+
+    // Clicking a drag handle should let the drag handle's own click handler
+    // update selection/menu state. Treating it as a generic outside click
+    // races that transaction and can immediately close the layout column menu.
+    if (event.target instanceof Element && event.target.closest(DRAG_HANDLE_SELECTOR)) {
+      return;
+    }
     closeLayoutColumnMenu();
   }, [closeLayoutColumnMenu]);
   var handleSetIsOpen = useCallback(function (isOpen) {
@@ -90,8 +100,8 @@ export var LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu(
   }, [setOutsideClickTargetRef]);
   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 : [];
   var target = useMemo(function () {
-    return isLayoutColumnMenuOpen ? getLayoutColumnMenuTarget(editorView, selection) : null;
-  }, [editorView, isLayoutColumnMenuOpen, selection]);
+    return isLayoutColumnMenuOpen ? getLayoutColumnMenuTarget(editorView, selection, layoutColumnMenuAnchorPos) : null;
+  }, [editorView, isLayoutColumnMenuOpen, layoutColumnMenuAnchorPos, selection]);
   var hasValidTarget = target instanceof HTMLElement;
   useEffect(function () {
     if (isLayoutColumnMenuOpen && (!hasValidTarget || components.length === 0)) {

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

@@ -0,0 +1,8 @@
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { getSelectedLayoutColumns } from '../../pm-plugins/utils/layout-column-selection';
+export var useSelectedLayoutColumns = function useSelectedLayoutColumns(api) {
+  return useSharedPluginStateWithSelector(api, ['selection'], function (states) {
+    var _states$selectionStat;
+    return getSelectedLayoutColumns((_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection);
+  });
+};

package/dist/types/layoutPluginType.d.ts

@@ -31,7 +31,7 @@ export type LayoutPlugin = NextEditorPlugin<'layout', {
     commands: {
         deleteLayoutColumn: ReturnType<typeof deleteLayoutColumn>;
         insertLayoutColumn: (side: InsertLayoutColumnSide) => EditorCommand;
-        setLayoutColumnValign: typeof setLayoutColumnValign;
+        setLayoutColumnValign: (valign: Parameters<typeof setLayoutColumnValign>[0]) => EditorCommand;
         toggleLayoutColumnMenu: typeof toggleLayoutColumnMenu;
     };
     dependencies: LayoutPluginDependencies;

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

@@ -33,8 +33,9 @@ export type InsertLayoutColumnSide = 'left' | 'right';
  */
 export declare function getEffectiveMaxLayoutColumns(): number;
 export declare const insertLayoutColumn: (side: InsertLayoutColumnSide, editorAnalyticsAPI?: EditorAnalyticsAPI) => EditorCommand;
-export declare const setLayoutColumnValign: (valign: Valign) => EditorCommand;
-export declare const toggleLayoutColumnMenu: ({ isOpen }: {
+export declare const setLayoutColumnValign: (valign: Valign, editorAnalyticsAPI?: EditorAnalyticsAPI) => EditorCommand;
+export declare const toggleLayoutColumnMenu: ({ anchorPos, isOpen }: {
+    anchorPos?: number;
     isOpen?: boolean;
 }) => EditorCommand;
 export declare const deleteLayoutColumn: (editorAnalyticsAPI?: EditorAnalyticsAPI) => EditorCommand;

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

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

package/dist/types/pm-plugins/utils/layout-column-selection.d.ts

@@ -0,0 +1,18 @@
+import type { Valign } from '@atlaskit/editor-common/types/valign';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
+export type SelectedLayoutColumn = {
+    index: number;
+    node: PMNode;
+    pos: number;
+};
+export type SelectedLayoutColumns = {
+    layoutSectionNode: PMNode;
+    layoutSectionPos: number;
+    selectedColumnIndices: number[];
+    selectedColumns: SelectedLayoutColumn[];
+};
+export declare const getSelectedLayoutColumns: (selection: Selection | undefined) => SelectedLayoutColumns | undefined;
+export declare const getLayoutSectionColumnCount: (layoutSection: PMNode | undefined) => number;
+export declare const getLayoutColumnValign: (layoutColumn: PMNode | undefined) => Valign | undefined;
+export declare const getLayoutColumnMenuAnchorPos: (selection: Selection | undefined, anchorPosFromHandle?: number) => number | undefined;

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

@@ -0,0 +1,4 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { LayoutPlugin } from '../../layoutPluginType';
+import { type SelectedLayoutColumns } from '../../pm-plugins/utils/layout-column-selection';
+export declare const useSelectedLayoutColumns: (api: ExtractInjectionAPI<LayoutPlugin> | undefined) => SelectedLayoutColumns | undefined;

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

@@ -31,7 +31,7 @@ export type LayoutPlugin = NextEditorPlugin<'layout', {
     commands: {
         deleteLayoutColumn: ReturnType<typeof deleteLayoutColumn>;
         insertLayoutColumn: (side: InsertLayoutColumnSide) => EditorCommand;
-        setLayoutColumnValign: typeof setLayoutColumnValign;
+        setLayoutColumnValign: (valign: Parameters<typeof setLayoutColumnValign>[0]) => EditorCommand;
         toggleLayoutColumnMenu: typeof toggleLayoutColumnMenu;
     };
     dependencies: LayoutPluginDependencies;

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

@@ -33,8 +33,9 @@ export type InsertLayoutColumnSide = 'left' | 'right';
  */
 export declare function getEffectiveMaxLayoutColumns(): number;
 export declare const insertLayoutColumn: (side: InsertLayoutColumnSide, editorAnalyticsAPI?: EditorAnalyticsAPI) => EditorCommand;
-export declare const setLayoutColumnValign: (valign: Valign) => EditorCommand;
-export declare const toggleLayoutColumnMenu: ({ isOpen }: {
+export declare const setLayoutColumnValign: (valign: Valign, editorAnalyticsAPI?: EditorAnalyticsAPI) => EditorCommand;
+export declare const toggleLayoutColumnMenu: ({ anchorPos, isOpen }: {
+    anchorPos?: number;
     isOpen?: boolean;
 }) => EditorCommand;
 export declare const deleteLayoutColumn: (editorAnalyticsAPI?: EditorAnalyticsAPI) => EditorCommand;

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

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

package/dist/types-ts4.5/pm-plugins/utils/layout-column-selection.d.ts

@@ -0,0 +1,18 @@
+import type { Valign } from '@atlaskit/editor-common/types/valign';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
+export type SelectedLayoutColumn = {
+    index: number;
+    node: PMNode;
+    pos: number;
+};
+export type SelectedLayoutColumns = {
+    layoutSectionNode: PMNode;
+    layoutSectionPos: number;
+    selectedColumnIndices: number[];
+    selectedColumns: SelectedLayoutColumn[];
+};
+export declare const getSelectedLayoutColumns: (selection: Selection | undefined) => SelectedLayoutColumns | undefined;
+export declare const getLayoutSectionColumnCount: (layoutSection: PMNode | undefined) => number;
+export declare const getLayoutColumnValign: (layoutColumn: PMNode | undefined) => Valign | undefined;
+export declare const getLayoutColumnMenuAnchorPos: (selection: Selection | undefined, anchorPosFromHandle?: number) => number | undefined;

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

@@ -0,0 +1,4 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { LayoutPlugin } from '../../layoutPluginType';
+import { type SelectedLayoutColumns } from '../../pm-plugins/utils/layout-column-selection';
+export declare const useSelectedLayoutColumns: (api: ExtractInjectionAPI<LayoutPlugin> | undefined) => SelectedLayoutColumns | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-layout",
-	"version": "10.4.0",
+	"version": "10.6.0",
 	"description": "Layout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -29,7 +29,7 @@
 	],
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/adf-schema": "^52.13.0",
+		"@atlaskit/adf-schema": "^52.14.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/editor-plugin-analytics": "^10.1.0",
 		"@atlaskit/editor-plugin-block-menu": "^9.2.0",
@@ -48,14 +48,14 @@
 		"@atlaskit/icon": "^35.0.0",
 		"@atlaskit/icon-lab": "^6.9.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^82.1.0",
+		"@atlaskit/tmp-editor-statsig": "^82.5.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.39.0",
+		"@atlaskit/editor-common": "^114.45.0",
 		"react": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},
@@ -115,6 +115,7 @@
 		}
 	},
 	"devDependencies": {
+		"react": "^18.2.0",
 		"react-intl": "^6.6.2"
 	}
 }

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

@@ -1,21 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getLayoutSectionColumnCount = exports.getLayoutSectionAtSelection = exports.getLayoutColumnValign = exports.getLayoutColumnAtSelection = void 0;
-var _state = require("@atlaskit/editor-prosemirror/state");
-var getLayoutColumnAtSelection = exports.getLayoutColumnAtSelection = function getLayoutColumnAtSelection(selection) {
-  return selection instanceof _state.NodeSelection && selection.node.type.name === 'layoutColumn' ? selection.node : undefined;
-};
-var getLayoutSectionAtSelection = exports.getLayoutSectionAtSelection = function getLayoutSectionAtSelection(selection) {
-  var selectedColumn = getLayoutColumnAtSelection(selection);
-  var parent = selectedColumn ? selection === null || selection === void 0 ? void 0 : selection.$from.parent : undefined;
-  return (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutSection' ? parent : undefined;
-};
-var getLayoutSectionColumnCount = exports.getLayoutSectionColumnCount = function getLayoutSectionColumnCount(layoutSection) {
-  return (layoutSection === null || layoutSection === void 0 ? void 0 : layoutSection.type.name) === 'layoutSection' ? layoutSection.childCount : 0;
-};
-var getLayoutColumnValign = exports.getLayoutColumnValign = function getLayoutColumnValign(layoutColumn) {
-  return layoutColumn === null || layoutColumn === void 0 ? void 0 : layoutColumn.attrs.valign;
-};

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

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useCurrentLayoutSection = exports.useCurrentLayoutColumn = void 0;
-var _hooks = require("@atlaskit/editor-common/hooks");
-var _layoutColumnSelection = require("./layoutColumnSelection");
-var useCurrentLayoutColumn = exports.useCurrentLayoutColumn = function useCurrentLayoutColumn(api) {
-  return (0, _hooks.useSharedPluginStateWithSelector)(api, ['selection'], function (states) {
-    var _states$selectionStat;
-    return (0, _layoutColumnSelection.getLayoutColumnAtSelection)((_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection);
-  });
-};
-var useCurrentLayoutSection = exports.useCurrentLayoutSection = function useCurrentLayoutSection(api) {
-  return (0, _hooks.useSharedPluginStateWithSelector)(api, ['selection'], function (states) {
-    var _states$selectionStat2;
-    return (0, _layoutColumnSelection.getLayoutSectionAtSelection)((_states$selectionStat2 = states.selectionState) === null || _states$selectionStat2 === void 0 ? void 0 : _states$selectionStat2.selection);
-  });
-};

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

@@ -1,9 +0,0 @@
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-export const getLayoutColumnAtSelection = selection => selection instanceof NodeSelection && selection.node.type.name === 'layoutColumn' ? selection.node : undefined;
-export const getLayoutSectionAtSelection = selection => {
-  const selectedColumn = getLayoutColumnAtSelection(selection);
-  const parent = selectedColumn ? selection === null || selection === void 0 ? void 0 : selection.$from.parent : undefined;
-  return (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutSection' ? parent : undefined;
-};
-export const getLayoutSectionColumnCount = layoutSection => (layoutSection === null || layoutSection === void 0 ? void 0 : layoutSection.type.name) === 'layoutSection' ? layoutSection.childCount : 0;
-export const getLayoutColumnValign = layoutColumn => layoutColumn === null || layoutColumn === void 0 ? void 0 : layoutColumn.attrs.valign;

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

@@ -1,10 +0,0 @@
-import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
-import { getLayoutColumnAtSelection, getLayoutSectionAtSelection } from './layoutColumnSelection';
-export const useCurrentLayoutColumn = api => useSharedPluginStateWithSelector(api, ['selection'], states => {
-  var _states$selectionStat;
-  return getLayoutColumnAtSelection((_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection);
-});
-export const useCurrentLayoutSection = api => useSharedPluginStateWithSelector(api, ['selection'], states => {
-  var _states$selectionStat2;
-  return getLayoutSectionAtSelection((_states$selectionStat2 = states.selectionState) === null || _states$selectionStat2 === void 0 ? void 0 : _states$selectionStat2.selection);
-});

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

@@ -1,15 +0,0 @@
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-export var getLayoutColumnAtSelection = function getLayoutColumnAtSelection(selection) {
-  return selection instanceof NodeSelection && selection.node.type.name === 'layoutColumn' ? selection.node : undefined;
-};
-export var getLayoutSectionAtSelection = function getLayoutSectionAtSelection(selection) {
-  var selectedColumn = getLayoutColumnAtSelection(selection);
-  var parent = selectedColumn ? selection === null || selection === void 0 ? void 0 : selection.$from.parent : undefined;
-  return (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutSection' ? parent : undefined;
-};
-export var getLayoutSectionColumnCount = function getLayoutSectionColumnCount(layoutSection) {
-  return (layoutSection === null || layoutSection === void 0 ? void 0 : layoutSection.type.name) === 'layoutSection' ? layoutSection.childCount : 0;
-};
-export var getLayoutColumnValign = function getLayoutColumnValign(layoutColumn) {
-  return layoutColumn === null || layoutColumn === void 0 ? void 0 : layoutColumn.attrs.valign;
-};

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

@@ -1,14 +0,0 @@
-import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
-import { getLayoutColumnAtSelection, getLayoutSectionAtSelection } from './layoutColumnSelection';
-export var useCurrentLayoutColumn = function useCurrentLayoutColumn(api) {
-  return useSharedPluginStateWithSelector(api, ['selection'], function (states) {
-    var _states$selectionStat;
-    return getLayoutColumnAtSelection((_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection);
-  });
-};
-export var useCurrentLayoutSection = function useCurrentLayoutSection(api) {
-  return useSharedPluginStateWithSelector(api, ['selection'], function (states) {
-    var _states$selectionStat2;
-    return getLayoutSectionAtSelection((_states$selectionStat2 = states.selectionState) === null || _states$selectionStat2 === void 0 ? void 0 : _states$selectionStat2.selection);
-  });
-};

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

@@ -1,7 +0,0 @@
-import type { Valign } from '@atlaskit/editor-common/types/valign';
-import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import type { Selection } from '@atlaskit/editor-prosemirror/state';
-export declare const getLayoutColumnAtSelection: (selection: Selection | undefined) => PMNode | undefined;
-export declare const getLayoutSectionAtSelection: (selection: Selection | undefined) => PMNode | undefined;
-export declare const getLayoutSectionColumnCount: (layoutSection: PMNode | undefined) => number;
-export declare const getLayoutColumnValign: (layoutColumn: PMNode | undefined) => Valign | undefined;

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

@@ -1,5 +0,0 @@
-import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import type { LayoutPlugin } from '../../layoutPluginType';
-export declare const useCurrentLayoutColumn: (api: ExtractInjectionAPI<LayoutPlugin> | undefined) => PMNode | undefined;
-export declare const useCurrentLayoutSection: (api: ExtractInjectionAPI<LayoutPlugin> | undefined) => PMNode | undefined;

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

@@ -1,7 +0,0 @@
-import type { Valign } from '@atlaskit/editor-common/types/valign';
-import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import type { Selection } from '@atlaskit/editor-prosemirror/state';
-export declare const getLayoutColumnAtSelection: (selection: Selection | undefined) => PMNode | undefined;
-export declare const getLayoutSectionAtSelection: (selection: Selection | undefined) => PMNode | undefined;
-export declare const getLayoutSectionColumnCount: (layoutSection: PMNode | undefined) => number;
-export declare const getLayoutColumnValign: (layoutColumn: PMNode | undefined) => Valign | undefined;

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

@@ -1,5 +0,0 @@
-import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import type { LayoutPlugin } from '../../layoutPluginType';
-export declare const useCurrentLayoutColumn: (api: ExtractInjectionAPI<LayoutPlugin> | undefined) => PMNode | undefined;
-export declare const useCurrentLayoutSection: (api: ExtractInjectionAPI<LayoutPlugin> | undefined) => PMNode | undefined;