@atlaskit/editor-plugin-layout 11.0.4 → 11.1.1

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

@@ -1,23 +1,35 @@
 import React, { useCallback } from 'react';
 import { useIntl } from 'react-intl';
+import { deleteColumn, getAriaKeyshortcuts, tooltip } from '@atlaskit/editor-common/keymaps';
 import { layoutMessages } from '@atlaskit/editor-common/messages';
-import { DeleteIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { DeleteIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
 import { useSelectedLayoutColumns } from './useSelectedLayoutColumns';
 var DeleteColumnDropdownItem = function DeleteColumnDropdownItem(_ref) {
+  var _tooltip;
   var api = _ref.api;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var selectedLayoutColumns = useSelectedLayoutColumns(api);
+  var setDangerPreview = useCallback(function (show) {
+    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.setLayoutColumnDangerPreview(show));
+  }, [api]);
+  var showDangerPreview = useCallback(function () {
+    setDangerPreview(true);
+  }, [setDangerPreview]);
+  var hideDangerPreview = useCallback(function () {
+    setDangerPreview(false);
+  }, [setDangerPreview]);
   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;
-    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (props) {
-      var _api$layout2;
+    var _api$layout2, _api$core2;
+    var deleteCommand = api === null || api === void 0 || (_api$layout2 = api.layout) === null || _api$layout2 === void 0 ? void 0 : _api$layout2.commands.deleteLayoutColumn();
+    api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (props) {
+      var _api$layout3;
       var tr = deleteCommand === null || deleteCommand === void 0 ? void 0 : deleteCommand(props);
       if (!tr) {
         return tr !== null && tr !== void 0 ? tr : null;
       }
-      api === null || api === void 0 || (_api$layout2 = api.layout) === null || _api$layout2 === void 0 || _api$layout2.commands.toggleLayoutColumnMenu({
+      api === null || api === void 0 || (_api$layout3 = api.layout) === null || _api$layout3 === void 0 || _api$layout3.commands.toggleLayoutColumnMenu({
         isOpen: false
       })({
         tr: tr
@@ -30,11 +42,19 @@ var DeleteColumnDropdownItem = function DeleteColumnDropdownItem(_ref) {
   }
   var selectedColumnCount = selectedLayoutColumns.selectedLayoutColumns.length;
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    ariaKeyshortcuts: getAriaKeyshortcuts(deleteColumn),
     onClick: onClick,
+    onFocus: showDangerPreview,
+    onMouseEnter: showDangerPreview,
+    onBlur: hideDangerPreview,
+    onMouseLeave: hideDangerPreview,
     elemBefore: /*#__PURE__*/React.createElement(DeleteIcon, {
       color: "currentColor",
       label: "",
       size: "small"
+    }),
+    elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
+      shortcut: (_tooltip = tooltip(deleteColumn)) !== null && _tooltip !== void 0 ? _tooltip : ''
     })
   }, formatMessage(layoutMessages.deleteColumn, {
     count: selectedColumnCount

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

@@ -1,7 +1,8 @@
 import React, { useCallback } from 'react';
 import { useIntl } from 'react-intl';
+import { addColumnAfter, addColumnBefore, getAriaKeyshortcuts, tooltip } from '@atlaskit/editor-common/keymaps';
 import { layoutMessages } from '@atlaskit/editor-common/messages';
-import { TableColumnAddLeftIcon, TableColumnAddRightIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { TableColumnAddLeftIcon, TableColumnAddRightIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
 import { getEffectiveMaxLayoutColumns } from '../../pm-plugins/actions';
 import { useSelectedLayoutColumns } from './useSelectedLayoutColumns';
 var INSERT_COLUMN_OPTIONS = {
@@ -17,7 +18,7 @@ var INSERT_COLUMN_OPTIONS = {
   }
 };
 export var InsertColumnDropdownItem = function InsertColumnDropdownItem(_ref) {
-  var _selectedLayoutColumn, _selectedLayoutColumn2;
+  var _selectedLayoutColumn, _selectedLayoutColumn2, _tooltip;
   var api = _ref.api,
     side = _ref.side;
   var _useIntl = useIntl(),
@@ -25,6 +26,7 @@ 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 shortcut = side === 'left' ? addColumnBefore : addColumnAfter;
   var selectedLayoutColumns = useSelectedLayoutColumns(api);
   var columnCount = (_selectedLayoutColumn = selectedLayoutColumns === null || selectedLayoutColumns === void 0 || (_selectedLayoutColumn2 = selectedLayoutColumns.layoutSectionNode) === null || _selectedLayoutColumn2 === void 0 ? void 0 : _selectedLayoutColumn2.childCount) !== null && _selectedLayoutColumn !== void 0 ? _selectedLayoutColumn : 0;
   var maxColumnCount = getEffectiveMaxLayoutColumns();
@@ -50,11 +52,15 @@ export var InsertColumnDropdownItem = function InsertColumnDropdownItem(_ref) {
     return null;
   }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    ariaKeyshortcuts: getAriaKeyshortcuts(shortcut),
     elemBefore: /*#__PURE__*/React.createElement(Icon, {
       color: "currentColor",
       label: "",
       size: "small"
     }),
+    elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
+      shortcut: (_tooltip = tooltip(shortcut)) !== null && _tooltip !== void 0 ? _tooltip : ''
+    }),
     onClick: onClick
   }, formatMessage(label));
 };

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

@@ -1,7 +1,9 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { bind } from 'bind-event-listener';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { DRAG_HANDLE_SELECTOR } from '@atlaskit/editor-common/styles';
 import { Popup } from '@atlaskit/editor-common/ui';
+import { ArrowKeyNavigationProvider, ArrowKeyNavigationType } from '@atlaskit/editor-common/ui-menu';
 import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { UserIntentPopupWrapper } from '@atlaskit/editor-common/user-intent';
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
@@ -13,6 +15,7 @@ import { LAYOUT_COLUMN_MENU } from './keys';
 var PopupWithListeners = withReactEditorViewOuterListeners(Popup);
 var LAYOUT_COLUMN_MENU_POPUP_OFFSET = [0, 4];
 var TOOLBAR_MENU_SELECTOR = '[data-toolbar-component="menu"]';
+var NESTED_DROPDOWN_MENU_SELECTOR = '[data-toolbar-nested-dropdown-menu]';
 
 /**
  * Returns the drag handle button for the selected layout column.
@@ -30,6 +33,9 @@ var getLayoutColumnMenuTarget = function getLayoutColumnMenuTarget(editorView, s
   var dragHandleContainer = (_columnDomRef$parentE = columnDomRef.parentElement) === null || _columnDomRef$parentE === void 0 ? void 0 : _columnDomRef$parentE.querySelector(':scope > [data-blocks-drag-handle-container]');
   return dragHandleContainer === null || dragHandleContainer === void 0 ? void 0 : dragHandleContainer.querySelector(DRAG_HANDLE_SELECTOR);
 };
+var focusTrap = {
+  initialFocus: undefined
+};
 export var LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu(_ref) {
   var _api$uiControlRegistr, _api$uiControlRegistr2;
   var api = _ref.api,
@@ -38,15 +44,17 @@ 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$layoutState2, _states$selectionStat;
+      var _states$layoutState$i, _states$layoutState, _states$layoutState2, _states$layoutState$l, _states$layoutState3, _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,
+        openedViaKeyboard: (_states$layoutState$l = (_states$layoutState3 = states.layoutState) === null || _states$layoutState3 === void 0 ? void 0 : _states$layoutState3.layoutColumnMenuOpenedViaKeyboard) !== null && _states$layoutState$l !== void 0 ? _states$layoutState$l : false,
         selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
       };
     }),
     isLayoutColumnMenuOpen = _useSharedPluginState.isLayoutColumnMenuOpen,
     layoutColumnMenuAnchorPos = _useSharedPluginState.layoutColumnMenuAnchorPos,
+    openedViaKeyboard = _useSharedPluginState.openedViaKeyboard,
     selection = _useSharedPluginState.selection;
   var closeLayoutColumnMenu = useCallback(function () {
     var _api$core, _api$layout;
@@ -55,7 +63,7 @@ export var LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu(
     }));
   }, [api]);
   var handleClickOutside = useCallback(function (event) {
-    if (event.target instanceof Element && (event.target.closest(TOOLBAR_MENU_SELECTOR) || event.target.closest('[data-toolbar-nested-dropdown-menu]'))) {
+    if (event.target instanceof Element && (event.target.closest(TOOLBAR_MENU_SELECTOR) || event.target.closest(NESTED_DROPDOWN_MENU_SELECTOR))) {
       return;
     }
 
@@ -72,6 +80,38 @@ export var LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu(
       closeLayoutColumnMenu();
     }
   }, [closeLayoutColumnMenu]);
+  var handleArrowKeyNavigationClose = useCallback(function (event) {
+    event.preventDefault();
+    closeLayoutColumnMenu();
+  }, [closeLayoutColumnMenu]);
+  var shouldDisableArrowKeyNavigation = useCallback(function (event) {
+    if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') {
+      return false;
+    }
+    var target = event.target;
+    if (!(target instanceof HTMLElement)) {
+      return false;
+    }
+    return target.closest(NESTED_DROPDOWN_MENU_SELECTOR) !== null;
+  }, []);
+  var menuWrapperRef = useRef(null);
+  var handleMenuKeyDown = useCallback(function (event) {
+    // Keep menu keyboard events scoped to the menu while preserving Escape and
+    // ArrowUp/ArrowDown handling from Popup and ArrowKeyNavigationProvider.
+    if (event.key !== 'Escape' && event.key !== 'ArrowUp' && event.key !== 'ArrowDown') {
+      event.stopPropagation();
+    }
+  }, []);
+  useEffect(function () {
+    var menuWrapper = menuWrapperRef.current;
+    if (!isLayoutColumnMenuOpen || !menuWrapper) {
+      return;
+    }
+    return bind(menuWrapper, {
+      type: 'keydown',
+      listener: handleMenuKeyDown
+    });
+  }, [handleMenuKeyDown, isLayoutColumnMenuOpen]);
   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, layoutColumnMenuAnchorPos) : null;
@@ -96,16 +136,23 @@ export var LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu(
     stick: true,
     offset: LAYOUT_COLUMN_MENU_POPUP_OFFSET,
     handleClickOutside: handleClickOutside,
-    handleEscapeKeydown: closeLayoutColumnMenu
+    handleEscapeKeydown: closeLayoutColumnMenu,
+    focusTrap: openedViaKeyboard ? focusTrap : undefined
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: menuWrapperRef
   }, /*#__PURE__*/React.createElement(UserIntentPopupWrapper, {
     api: api,
     userIntent: "layoutColumnMenuPopupOpen"
   }, /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, {
     isOpen: isLayoutColumnMenuOpen,
     setIsOpen: handleSetIsOpen
+  }, /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
+    type: ArrowKeyNavigationType.MENU,
+    handleClose: handleArrowKeyNavigationClose,
+    disableArrowKeyNavigation: shouldDisableArrowKeyNavigation
   }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
     components: components,
     fallbacks: LAYOUT_COLUMN_MENU_FALLBACKS,
     surface: LAYOUT_COLUMN_MENU
-  }))));
+  }))))));
 });

package/dist/esm/ui/global-styles.js

@@ -11,6 +11,13 @@ import { useIntl } from 'react-intl';
 import { layoutMessages as messages } from '@atlaskit/editor-common/messages';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 var PLACEHOLDER_SELECTOR = '.ProseMirror-focused .layoutSectionView-content-wrap.selected [data-layout-column] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)';
+var layoutColumnDangerPreviewStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '.ProseMirror [data-layout-column].layout-column-danger-preview': {
+    backgroundColor: "var(--ds-background-danger, #FFECEB)",
+    boxShadow: "inset 0 0 0 2px ".concat("var(--ds-border-danger, #E2483D)")
+  }
+});
 var getPlaceholderStyle = function getPlaceholderStyle(message) {
   if (editorExperiment('platform_editor_controls', 'variant1')) {
     return css(_defineProperty({}, "".concat(PLACEHOLDER_SELECTOR), {
@@ -48,7 +55,10 @@ export var GlobalStylesWrapper = function GlobalStylesWrapper() {
     var placeholderText = editorExperiment('platform_editor_controls', 'variant1') ? messages.controlslayoutPlaceholder : messages.layoutPlaceholder;
     return getPlaceholderStyle(formatMessage(placeholderText));
   }, [formatMessage]);
+  var globalStyles = useMemo(function () {
+    return [placeholderStyle, layoutColumnDangerPreviewStyle];
+  }, [placeholderStyle]);
   return jsx(Global, {
-    styles: placeholderStyle
+    styles: globalStyles
   });
 };

package/dist/types/layoutPluginType.d.ts

@@ -12,7 +12,7 @@ import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 import type { UiControlRegistryPlugin } from '@atlaskit/editor-plugin-ui-control-registry';
 import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
-import type { DistributeLayoutColumnsOptions, InsertLayoutColumnsInputMethod, InsertLayoutColumnSide } from './pm-plugins/actions';
+import type { DistributeLayoutColumnsOptions, InsertLayoutColumnSide, InsertLayoutColumnsInputMethod, LayoutColumnActionInputMethod, ToggleLayoutColumnMenuOptions } from './pm-plugins/actions';
 import type { LayoutState } from './pm-plugins/types';
 import type { LayoutPluginOptions } from './types';
 export type LayoutPluginDependencies = [
@@ -34,14 +34,12 @@ export type LayoutPlugin = NextEditorPlugin<'layout', {
         insertLayoutColumns: (inputMethod: InsertLayoutColumnsInputMethod) => Command;
     };
     commands: {
-        deleteLayoutColumn: EditorCommand;
+        deleteLayoutColumn: (inputMethod?: LayoutColumnActionInputMethod) => EditorCommand;
         distributeLayoutColumns: (options?: DistributeLayoutColumnsOptions) => EditorCommand;
-        insertLayoutColumn: (side: InsertLayoutColumnSide) => EditorCommand;
+        insertLayoutColumn: (side: InsertLayoutColumnSide, inputMethod?: LayoutColumnActionInputMethod) => EditorCommand;
+        setLayoutColumnDangerPreview: (show: boolean) => EditorCommand;
         setLayoutColumnValign: (valign: Valign) => EditorCommand;
-        toggleLayoutColumnMenu: (options: {
-            anchorPos?: number;
-            isOpen?: boolean;
-        }) => EditorCommand;
+        toggleLayoutColumnMenu: (options: ToggleLayoutColumnMenuOptions) => EditorCommand;
     };
     dependencies: LayoutPluginDependencies;
     pluginConfiguration: LayoutPluginOptions | undefined;

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

@@ -37,20 +37,24 @@ export type LayoutColumnInsertMeta = {
     side: InsertLayoutColumnSide;
 };
 type LayoutPluginAPI = ExtractInjectionAPI<LayoutPlugin> | undefined;
+export type LayoutColumnActionInputMethod = INPUT_METHOD.LAYOUT_COLUMN_MENU | INPUT_METHOD.KEYBOARD;
 /**
  * Returns the active maximum layout column count for the current advanced layouts experiment state.
  */
 export declare function getEffectiveMaxLayoutColumns(): number;
-export declare const insertLayoutColumn: (side: InsertLayoutColumnSide, editorAnalyticsAPI?: EditorAnalyticsAPI, api?: LayoutPluginAPI) => EditorCommand;
+export declare const insertLayoutColumn: (side: InsertLayoutColumnSide, editorAnalyticsAPI?: EditorAnalyticsAPI, api?: LayoutPluginAPI, inputMethod?: LayoutColumnActionInputMethod) => EditorCommand;
 export declare const setLayoutColumnValign: (valign: Valign, editorAnalyticsAPI?: EditorAnalyticsAPI, api?: LayoutPluginAPI) => EditorCommand;
 export type DistributeLayoutColumnsOptions = {
     inputMethod?: INPUT_METHOD.LAYOUT_COLUMN_MENU | INPUT_METHOD.FLOATING_TB;
     target?: 'selectedColumns' | 'allColumns';
 };
 export declare const distributeLayoutColumns: (editorAnalyticsAPI?: EditorAnalyticsAPI, api?: LayoutPluginAPI) => ({ inputMethod, target, }?: DistributeLayoutColumnsOptions) => EditorCommand;
-export declare const toggleLayoutColumnMenu: ({ anchorPos, isOpen }: {
+export type ToggleLayoutColumnMenuOptions = {
     anchorPos?: number;
     isOpen?: boolean;
-}) => EditorCommand;
-export declare const deleteLayoutColumn: (editorAnalyticsAPI?: EditorAnalyticsAPI, api?: LayoutPluginAPI) => EditorCommand;
+    openedViaKeyboard?: boolean;
+};
+export declare const toggleLayoutColumnMenu: ({ anchorPos, isOpen, openedViaKeyboard }: ToggleLayoutColumnMenuOptions) => EditorCommand;
+export declare const setLayoutColumnDangerPreview: (show: boolean) => EditorCommand;
+export declare const deleteLayoutColumn: (editorAnalyticsAPI?: EditorAnalyticsAPI, api?: LayoutPluginAPI, inputMethod?: LayoutColumnActionInputMethod) => EditorCommand;
 export {};

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

@@ -0,0 +1,10 @@
+import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { LayoutPlugin } from '../layoutPluginType';
+/**
+ * Creates shortcut handlers for layout column actions.
+ */
+declare function keymapPlugin({ api }: {
+    api: ExtractInjectionAPI<LayoutPlugin> | undefined;
+}): SafePlugin;
+export default keymapPlugin;

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

@@ -4,9 +4,11 @@ export type LayoutState = {
     addSidebarLayouts: boolean;
     allowBreakout: boolean;
     allowSingleColumnLayout: boolean;
+    dangerPreviewLayoutColumnPositions: number[] | undefined;
     isLayoutColumnMenuOpen: boolean;
     isResizing: boolean;
     layoutColumnMenuAnchorPos: number | undefined;
+    layoutColumnMenuOpenedViaKeyboard: boolean;
     pos: number | null;
     selectedLayout: PresetLayout | undefined;
 };

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

@@ -13,6 +13,7 @@ export type SelectedLayoutColumns = {
     startIndex: number;
 };
 export declare const getSelectedLayoutColumnsFromSelection: (selection: Selection) => SelectedLayoutColumns | undefined;
+export declare const getLayoutColumnsFromContentSelection: (selection: Selection) => SelectedLayoutColumns | undefined;
 export declare const getAllLayoutColumnsFromSelection: (selection: Selection) => SelectedLayoutColumns | undefined;
 export declare const getLayoutColumnValign: (layoutColumn: PMNode | undefined) => Valign | undefined;
 export declare const getLayoutColumnMenuAnchorPos: (selection: Selection, anchorPosFromHandle?: number) => number | undefined;

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

@@ -12,7 +12,7 @@ import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 import type { UiControlRegistryPlugin } from '@atlaskit/editor-plugin-ui-control-registry';
 import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
-import type { DistributeLayoutColumnsOptions, InsertLayoutColumnsInputMethod, InsertLayoutColumnSide } from './pm-plugins/actions';
+import type { DistributeLayoutColumnsOptions, InsertLayoutColumnSide, InsertLayoutColumnsInputMethod, LayoutColumnActionInputMethod, ToggleLayoutColumnMenuOptions } from './pm-plugins/actions';
 import type { LayoutState } from './pm-plugins/types';
 import type { LayoutPluginOptions } from './types';
 export type LayoutPluginDependencies = [
@@ -34,14 +34,12 @@ export type LayoutPlugin = NextEditorPlugin<'layout', {
         insertLayoutColumns: (inputMethod: InsertLayoutColumnsInputMethod) => Command;
     };
     commands: {
-        deleteLayoutColumn: EditorCommand;
+        deleteLayoutColumn: (inputMethod?: LayoutColumnActionInputMethod) => EditorCommand;
         distributeLayoutColumns: (options?: DistributeLayoutColumnsOptions) => EditorCommand;
-        insertLayoutColumn: (side: InsertLayoutColumnSide) => EditorCommand;
+        insertLayoutColumn: (side: InsertLayoutColumnSide, inputMethod?: LayoutColumnActionInputMethod) => EditorCommand;
+        setLayoutColumnDangerPreview: (show: boolean) => EditorCommand;
         setLayoutColumnValign: (valign: Valign) => EditorCommand;
-        toggleLayoutColumnMenu: (options: {
-            anchorPos?: number;
-            isOpen?: boolean;
-        }) => EditorCommand;
+        toggleLayoutColumnMenu: (options: ToggleLayoutColumnMenuOptions) => EditorCommand;
     };
     dependencies: LayoutPluginDependencies;
     pluginConfiguration: LayoutPluginOptions | undefined;

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

@@ -37,20 +37,24 @@ export type LayoutColumnInsertMeta = {
     side: InsertLayoutColumnSide;
 };
 type LayoutPluginAPI = ExtractInjectionAPI<LayoutPlugin> | undefined;
+export type LayoutColumnActionInputMethod = INPUT_METHOD.LAYOUT_COLUMN_MENU | INPUT_METHOD.KEYBOARD;
 /**
  * Returns the active maximum layout column count for the current advanced layouts experiment state.
  */
 export declare function getEffectiveMaxLayoutColumns(): number;
-export declare const insertLayoutColumn: (side: InsertLayoutColumnSide, editorAnalyticsAPI?: EditorAnalyticsAPI, api?: LayoutPluginAPI) => EditorCommand;
+export declare const insertLayoutColumn: (side: InsertLayoutColumnSide, editorAnalyticsAPI?: EditorAnalyticsAPI, api?: LayoutPluginAPI, inputMethod?: LayoutColumnActionInputMethod) => EditorCommand;
 export declare const setLayoutColumnValign: (valign: Valign, editorAnalyticsAPI?: EditorAnalyticsAPI, api?: LayoutPluginAPI) => EditorCommand;
 export type DistributeLayoutColumnsOptions = {
     inputMethod?: INPUT_METHOD.LAYOUT_COLUMN_MENU | INPUT_METHOD.FLOATING_TB;
     target?: 'selectedColumns' | 'allColumns';
 };
 export declare const distributeLayoutColumns: (editorAnalyticsAPI?: EditorAnalyticsAPI, api?: LayoutPluginAPI) => ({ inputMethod, target, }?: DistributeLayoutColumnsOptions) => EditorCommand;
-export declare const toggleLayoutColumnMenu: ({ anchorPos, isOpen }: {
+export type ToggleLayoutColumnMenuOptions = {
     anchorPos?: number;
     isOpen?: boolean;
-}) => EditorCommand;
-export declare const deleteLayoutColumn: (editorAnalyticsAPI?: EditorAnalyticsAPI, api?: LayoutPluginAPI) => EditorCommand;
+    openedViaKeyboard?: boolean;
+};
+export declare const toggleLayoutColumnMenu: ({ anchorPos, isOpen, openedViaKeyboard }: ToggleLayoutColumnMenuOptions) => EditorCommand;
+export declare const setLayoutColumnDangerPreview: (show: boolean) => EditorCommand;
+export declare const deleteLayoutColumn: (editorAnalyticsAPI?: EditorAnalyticsAPI, api?: LayoutPluginAPI, inputMethod?: LayoutColumnActionInputMethod) => EditorCommand;
 export {};

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

@@ -0,0 +1,10 @@
+import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { LayoutPlugin } from '../layoutPluginType';
+/**
+ * Creates shortcut handlers for layout column actions.
+ */
+declare function keymapPlugin({ api }: {
+    api: ExtractInjectionAPI<LayoutPlugin> | undefined;
+}): SafePlugin;
+export default keymapPlugin;

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

@@ -4,9 +4,11 @@ export type LayoutState = {
     addSidebarLayouts: boolean;
     allowBreakout: boolean;
     allowSingleColumnLayout: boolean;
+    dangerPreviewLayoutColumnPositions: number[] | undefined;
     isLayoutColumnMenuOpen: boolean;
     isResizing: boolean;
     layoutColumnMenuAnchorPos: number | undefined;
+    layoutColumnMenuOpenedViaKeyboard: boolean;
     pos: number | null;
     selectedLayout: PresetLayout | undefined;
 };

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

@@ -13,6 +13,7 @@ export type SelectedLayoutColumns = {
     startIndex: number;
 };
 export declare const getSelectedLayoutColumnsFromSelection: (selection: Selection) => SelectedLayoutColumns | undefined;
+export declare const getLayoutColumnsFromContentSelection: (selection: Selection) => SelectedLayoutColumns | undefined;
 export declare const getAllLayoutColumnsFromSelection: (selection: Selection) => SelectedLayoutColumns | undefined;
 export declare const getLayoutColumnValign: (layoutColumn: PMNode | undefined) => Valign | undefined;
 export declare const getLayoutColumnMenuAnchorPos: (selection: Selection, anchorPosFromHandle?: number) => number | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-layout",
-	"version": "11.0.4",
+	"version": "11.1.1",
 	"description": "Layout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,7 +32,7 @@
 		"@atlaskit/adf-schema": "^52.16.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/editor-plugin-analytics": "^11.0.0",
-		"@atlaskit/editor-plugin-block-controls": "^12.0.0",
+		"@atlaskit/editor-plugin-block-controls": "^12.1.0",
 		"@atlaskit/editor-plugin-block-menu": "^10.1.0",
 		"@atlaskit/editor-plugin-decorations": "^11.0.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^11.0.0",
@@ -50,14 +50,14 @@
 		"@atlaskit/icon": "^35.4.0",
 		"@atlaskit/icon-lab": "^6.13.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^89.4.0",
+		"@atlaskit/tmp-editor-statsig": "^90.0.0",
 		"@atlaskit/tokens": "^13.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^115.6.0",
+		"@atlaskit/editor-common": "^115.7.0",
 		"react": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},