@atlaskit/editor-plugin-layout 11.0.4 → 11.1.1

package/dist/es2019/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';
 const INSERT_COLUMN_OPTIONS = {
@@ -20,7 +21,7 @@ export const InsertColumnDropdownItem = ({
   api,
   side
 }) => {
-  var _selectedLayoutColumn, _selectedLayoutColumn2;
+  var _selectedLayoutColumn, _selectedLayoutColumn2, _tooltip;
   const {
     formatMessage
   } = useIntl();
@@ -28,6 +29,7 @@ export const InsertColumnDropdownItem = ({
     Icon,
     label
   } = INSERT_COLUMN_OPTIONS[side];
+  const shortcut = side === 'left' ? addColumnBefore : addColumnAfter;
   const selectedLayoutColumns = useSelectedLayoutColumns(api);
   const columnCount = (_selectedLayoutColumn = selectedLayoutColumns === null || selectedLayoutColumns === void 0 ? void 0 : (_selectedLayoutColumn2 = selectedLayoutColumns.layoutSectionNode) === null || _selectedLayoutColumn2 === void 0 ? void 0 : _selectedLayoutColumn2.childCount) !== null && _selectedLayoutColumn !== void 0 ? _selectedLayoutColumn : 0;
   const maxColumnCount = getEffectiveMaxLayoutColumns();
@@ -53,11 +55,15 @@ export const InsertColumnDropdownItem = ({
     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/es2019/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';
 const PopupWithListeners = withReactEditorViewOuterListeners(Popup);
 const LAYOUT_COLUMN_MENU_POPUP_OFFSET = [0, 4];
 const TOOLBAR_MENU_SELECTOR = '[data-toolbar-component="menu"]';
+const NESTED_DROPDOWN_MENU_SELECTOR = '[data-toolbar-nested-dropdown-menu]';
 
 /**
  * Returns the drag handle button for the selected layout column.
@@ -30,6 +33,9 @@ const getLayoutColumnMenuTarget = (editorView, selection, anchorPosFromHandle) =
   const 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);
 };
+const focusTrap = {
+  initialFocus: undefined
+};
 export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu({
   api,
   editorView,
@@ -41,12 +47,14 @@ export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMen
   const {
     isLayoutColumnMenuOpen,
     layoutColumnMenuAnchorPos,
+    openedViaKeyboard,
     selection
   } = useSharedPluginStateWithSelector(api, ['layout', 'selection'], 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
     };
   });
@@ -57,7 +65,7 @@ export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMen
     }));
   }, [api]);
   const handleClickOutside = useCallback(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;
     }
 
@@ -74,6 +82,38 @@ export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMen
       closeLayoutColumnMenu();
     }
   }, [closeLayoutColumnMenu]);
+  const handleArrowKeyNavigationClose = useCallback(event => {
+    event.preventDefault();
+    closeLayoutColumnMenu();
+  }, [closeLayoutColumnMenu]);
+  const shouldDisableArrowKeyNavigation = useCallback(event => {
+    if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') {
+      return false;
+    }
+    const target = event.target;
+    if (!(target instanceof HTMLElement)) {
+      return false;
+    }
+    return target.closest(NESTED_DROPDOWN_MENU_SELECTOR) !== null;
+  }, []);
+  const menuWrapperRef = useRef(null);
+  const handleMenuKeyDown = useCallback(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(() => {
+    const menuWrapper = menuWrapperRef.current;
+    if (!isLayoutColumnMenuOpen || !menuWrapper) {
+      return;
+    }
+    return bind(menuWrapper, {
+      type: 'keydown',
+      listener: handleMenuKeyDown
+    });
+  }, [handleMenuKeyDown, isLayoutColumnMenuOpen]);
   const components = (_api$uiControlRegistr = api === null || api === void 0 ? void 0 : (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(LAYOUT_COLUMN_MENU.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
   const target = useMemo(() => isLayoutColumnMenuOpen ? getLayoutColumnMenuTarget(editorView, selection, layoutColumnMenuAnchorPos) : null, [editorView, isLayoutColumnMenuOpen, layoutColumnMenuAnchorPos, selection]);
   const hasValidTarget = target instanceof HTMLElement;
@@ -96,16 +136,23 @@ export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMen
     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/es2019/ui/global-styles.js

@@ -10,6 +10,13 @@ import { useIntl } from 'react-intl';
 import { layoutMessages as messages } from '@atlaskit/editor-common/messages';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 const PLACEHOLDER_SELECTOR = '.ProseMirror-focused .layoutSectionView-content-wrap.selected [data-layout-column] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)';
+const 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 ${"var(--ds-border-danger, #E2483D)"}`
+  }
+});
 const getPlaceholderStyle = message => {
   if (editorExperiment('platform_editor_controls', 'variant1')) {
     return css({
@@ -52,7 +59,8 @@ export const GlobalStylesWrapper = () => {
     const placeholderText = editorExperiment('platform_editor_controls', 'variant1') ? messages.controlslayoutPlaceholder : messages.layoutPlaceholder;
     return getPlaceholderStyle(formatMessage(placeholderText));
   }, [formatMessage]);
+  const globalStyles = useMemo(() => [placeholderStyle, layoutColumnDangerPreviewStyle], [placeholderStyle]);
   return jsx(Global, {
-    styles: placeholderStyle
+    styles: globalStyles
   });
 };

package/dist/esm/layoutPlugin.js

@@ -11,7 +11,8 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { createDefaultLayoutSection, createMultiColumnLayoutSection, deleteLayoutColumn, distributeLayoutColumns as _distributeLayoutColumns, insertLayoutColumn as _insertLayoutColumn, insertLayoutColumnsWithAnalytics, setLayoutColumnValign as _setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
+import { createDefaultLayoutSection, createMultiColumnLayoutSection, deleteLayoutColumn as _deleteLayoutColumn, distributeLayoutColumns as _distributeLayoutColumns, insertLayoutColumn as _insertLayoutColumn, insertLayoutColumnsWithAnalytics, setLayoutColumnDangerPreview, setLayoutColumnValign as _setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
+import { default as createLayoutKeymapPlugin } from './pm-plugins/keymap';
 import { default as createLayoutPlugin } from './pm-plugins/main';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { default as createLayoutResizingPlugin } from './pm-plugins/resizing';
@@ -50,7 +51,7 @@ export var selectIntoLayoutSection = function selectIntoLayoutSection(tr) {
   return tr;
 };
 export var layoutPlugin = function layoutPlugin(_ref) {
-  var _api$analytics2, _api$analytics5;
+  var _api$analytics2;
   var _ref$config = _ref.config,
     options = _ref$config === void 0 ? {} : _ref$config,
     api = _ref.api;
@@ -102,6 +103,16 @@ export var layoutPlugin = function layoutPlugin(_ref) {
           return createLayoutPlugin(options, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
         }
       }];
+      if (expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
+        plugins.push({
+          name: 'layoutKeymap',
+          plugin: function plugin() {
+            return createLayoutKeymapPlugin({
+              api: api
+            });
+          }
+        });
+      }
       if ((options.editorAppearance === 'full-page' || options.editorAppearance === 'full-width' || options.editorAppearance === 'max' && editorExperiment('platform_editor_layout_column_resize_handle', true)) && api && editorExperiment('advanced_layouts', true)) {
         plugins.push({
           name: 'layoutResizing',
@@ -372,15 +383,19 @@ export var layoutPlugin = function layoutPlugin(_ref) {
       return pluginKey.getState(editorState);
     },
     commands: {
-      deleteLayoutColumn: deleteLayoutColumn(api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, api),
+      deleteLayoutColumn: function deleteLayoutColumn(inputMethod) {
+        var _api$analytics5;
+        return _deleteLayoutColumn(api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, api, inputMethod);
+      },
       distributeLayoutColumns: function distributeLayoutColumns(options) {
         var _api$analytics6;
         return _distributeLayoutColumns(api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions, api)(options);
       },
-      insertLayoutColumn: function insertLayoutColumn(side) {
+      insertLayoutColumn: function insertLayoutColumn(side, inputMethod) {
         var _api$analytics7;
-        return _insertLayoutColumn(side, api === null || api === void 0 || (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions, api);
+        return _insertLayoutColumn(side, api === null || api === void 0 || (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions, api, inputMethod);
       },
+      setLayoutColumnDangerPreview: setLayoutColumnDangerPreview,
       setLayoutColumnValign: function setLayoutColumnValign(valign) {
         var _api$analytics8;
         return _setLayoutColumnValign(valign, api === null || api === void 0 || (_api$analytics8 = api.analytics) === null || _api$analytics8 === void 0 ? void 0 : _api$analytics8.actions, api);

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

@@ -14,7 +14,7 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { EVEN_DISTRIBUTED_COL_WIDTHS, MAX_LAYOUT_COLUMNS, MAX_STANDARD_LAYOUT_COLUMNS, MIN_LAYOUT_COLUMN_WIDTH_PERCENT } from './consts';
 import { pluginKey } from './plugin-key';
 import { calculateDistribution, isDistributedUniformly, redistributeAfterDeletion, redistributeProportionally } from './utils/layout-column-distribution';
-import { getAllLayoutColumnsFromSelection, getSelectedLayoutColumnsFromSelection } from './utils/layout-column-selection';
+import { getAllLayoutColumnsFromSelection, getLayoutColumnsFromContentSelection, getSelectedLayoutColumnsFromSelection } from './utils/layout-column-selection';
 export var ONE_COL_LAYOUTS = ['single'];
 export var TWO_COL_LAYOUTS = ['two_equal', 'two_left_sidebar', 'two_right_sidebar'];
 export var THREE_COL_LAYOUTS = ['three_equal', 'three_with_sidebars'];
@@ -571,12 +571,13 @@ export function getEffectiveMaxLayoutColumns() {
   return editorExperiment('advanced_layouts', true) ? MAX_LAYOUT_COLUMNS : MAX_STANDARD_LAYOUT_COLUMNS;
 }
 var insertLayoutColumnAt = function insertLayoutColumnAt(side, editorAnalyticsAPI) {
+  var inputMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INPUT_METHOD.LAYOUT_COLUMN_MENU;
   return function (_ref4) {
     var tr = _ref4.tr;
     if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
       return null;
     }
-    var selectedLayoutColumnsResult = getSelectedLayoutColumnsFromSelection(tr.selection);
+    var selectedLayoutColumnsResult = getLayoutColumnsFromContentSelection(tr.selection);
     if (!selectedLayoutColumnsResult || selectedLayoutColumnsResult.selectedLayoutColumns.length === 0) {
       return null;
     }
@@ -636,7 +637,7 @@ var insertLayoutColumnAt = function insertLayoutColumnAt(side, editorAnalyticsAP
       attributes: {
         columnCount: redistributedWidths.length,
         endIndex: endIndex,
-        inputMethod: INPUT_METHOD.LAYOUT_COLUMN_MENU,
+        inputMethod: inputMethod,
         selectedCount: selectedColumnCount,
         side: side,
         startIndex: startIndex
@@ -648,9 +649,10 @@ var insertLayoutColumnAt = function insertLayoutColumnAt(side, editorAnalyticsAP
   };
 };
 export var insertLayoutColumn = function insertLayoutColumn(side, editorAnalyticsAPI, api) {
+  var inputMethod = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : INPUT_METHOD.LAYOUT_COLUMN_MENU;
   return function (_ref5) {
     var tr = _ref5.tr;
-    var result = insertLayoutColumnAt(side, editorAnalyticsAPI)({
+    var result = insertLayoutColumnAt(side, editorAnalyticsAPI, inputMethod)({
       tr: tr
     });
     if (result) {
@@ -791,25 +793,43 @@ export var distributeLayoutColumns = function distributeLayoutColumns(editorAnal
 };
 export var toggleLayoutColumnMenu = function toggleLayoutColumnMenu(_ref11) {
   var anchorPos = _ref11.anchorPos,
-    isOpen = _ref11.isOpen;
+    isOpen = _ref11.isOpen,
+    openedViaKeyboard = _ref11.openedViaKeyboard;
   return function (_ref12) {
     var tr = _ref12.tr;
     tr.setMeta('toggleLayoutColumnMenu', {
       anchorPos: anchorPos,
-      isOpen: isOpen
+      isOpen: isOpen,
+      openedViaKeyboard: openedViaKeyboard
     });
     tr.setMeta('scrollIntoView', false);
     return tr;
   };
 };
-export var deleteLayoutColumn = function deleteLayoutColumn(editorAnalyticsAPI, api) {
+export var setLayoutColumnDangerPreview = function setLayoutColumnDangerPreview(show) {
   return function (_ref13) {
-    var _api$blockControls4;
+    var _selectedLayoutColumn;
     var tr = _ref13.tr;
+    var selectedLayoutColumnsResult = getSelectedLayoutColumnsFromSelection(tr.selection);
+    var positions = show ? (_selectedLayoutColumn = selectedLayoutColumnsResult === null || selectedLayoutColumnsResult === void 0 ? void 0 : selectedLayoutColumnsResult.selectedLayoutColumns.map(function (_ref14) {
+      var pos = _ref14.pos;
+      return pos;
+    })) !== null && _selectedLayoutColumn !== void 0 ? _selectedLayoutColumn : [] : null;
+    tr.setMeta('layoutColumnDangerPreview', positions);
+    tr.setMeta('addToHistory', false);
+    tr.setMeta('scrollIntoView', false);
+    return tr;
+  };
+};
+export var deleteLayoutColumn = function deleteLayoutColumn(editorAnalyticsAPI, api) {
+  var inputMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INPUT_METHOD.LAYOUT_COLUMN_MENU;
+  return function (_ref15) {
+    var _api$blockControls4;
+    var tr = _ref15.tr;
     if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
       return null;
     }
-    var selectedLayoutColumnsResult = getSelectedLayoutColumnsFromSelection(tr.selection);
+    var selectedLayoutColumnsResult = getLayoutColumnsFromContentSelection(tr.selection);
     if (!selectedLayoutColumnsResult || selectedLayoutColumnsResult.selectedLayoutColumns.length === 0) {
       return null;
     }
@@ -826,7 +846,7 @@ export var deleteLayoutColumn = function deleteLayoutColumn(editorAnalyticsAPI,
         attributes: {
           columnCount: columnCount,
           endIndex: endIndex,
-          inputMethod: INPUT_METHOD.LAYOUT_COLUMN_MENU,
+          inputMethod: inputMethod,
           selectedCount: selectedLayoutColumns.length,
           startIndex: startIndex
         },

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

@@ -0,0 +1,25 @@
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { addColumnAfter, addColumnAfterVO, addColumnBefore, addColumnBeforeVO, bindKeymapWithEditorCommand, deleteColumn, keymap } from '@atlaskit/editor-common/keymaps';
+import { deleteLayoutColumn, insertLayoutColumn } from './actions';
+var bindLayoutColumnShortcut = function bindLayoutColumnShortcut(shortcut, command, list) {
+  if (!shortcut) {
+    return;
+  }
+  bindKeymapWithEditorCommand(shortcut, command, list);
+};
+
+/**
+ * Creates shortcut handlers for layout column actions.
+ */
+function keymapPlugin(_ref) {
+  var _api$analytics, _api$analytics2, _api$analytics3, _api$analytics4, _api$analytics5;
+  var api = _ref.api;
+  var list = {};
+  bindLayoutColumnShortcut(addColumnBefore.common, insertLayoutColumn('left', api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api, INPUT_METHOD.KEYBOARD), list);
+  bindLayoutColumnShortcut(addColumnBeforeVO.common, insertLayoutColumn('left', api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api, INPUT_METHOD.KEYBOARD), list);
+  bindLayoutColumnShortcut(addColumnAfter.common, insertLayoutColumn('right', api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, api, INPUT_METHOD.KEYBOARD), list);
+  bindLayoutColumnShortcut(addColumnAfterVO.common, insertLayoutColumn('right', api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions, api, INPUT_METHOD.KEYBOARD), list);
+  bindLayoutColumnShortcut(deleteColumn.common, deleteLayoutColumn(api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, api, INPUT_METHOD.KEYBOARD), list);
+  return keymap(list);
+}
+export default keymapPlugin;

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

@@ -52,6 +52,18 @@ var getNodeDecoration = function getNodeDecoration(pos, node) {
     class: 'selected'
   })];
 };
+var getDangerPreviewDecorations = function getDangerPreviewDecorations(state, positions) {
+  var _positions$flatMap;
+  return (_positions$flatMap = positions === null || positions === void 0 ? void 0 : positions.flatMap(function (pos) {
+    var node = state.doc.nodeAt(pos);
+    if (!node) {
+      return [];
+    }
+    return [Decoration.node(pos, pos + node.nodeSize, {
+      class: 'layout-column-danger-preview'
+    })];
+  })) !== null && _positions$flatMap !== void 0 ? _positions$flatMap : [];
+};
 var getInitialPluginState = function getInitialPluginState(options, state) {
   var maybeLayoutSection = getMaybeLayoutSection(state);
   var allowBreakout = options.allowBreakout || false;
@@ -67,9 +79,52 @@ var getInitialPluginState = function getInitialPluginState(options, state) {
     allowSingleColumnLayout: allowSingleColumnLayout,
     isResizing: false,
     isLayoutColumnMenuOpen: false,
-    layoutColumnMenuAnchorPos: undefined
+    layoutColumnMenuOpenedViaKeyboard: false,
+    layoutColumnMenuAnchorPos: undefined,
+    dangerPreviewLayoutColumnPositions: undefined
   };
 };
+var reduceLayoutColumnMenuState = function reduceLayoutColumnMenuState(pluginState, action) {
+  switch (action.type) {
+    case 'toggleLayoutColumnMenu':
+      {
+        var _action$meta = action.meta,
+          anchorPos = _action$meta.anchorPos,
+          isOpen = _action$meta.isOpen,
+          openedViaKeyboard = _action$meta.openedViaKeyboard;
+        var nextIsOpen = isOpen !== null && isOpen !== void 0 ? isOpen : !pluginState.isLayoutColumnMenuOpen;
+        return _objectSpread(_objectSpread({}, pluginState), {}, {
+          isLayoutColumnMenuOpen: nextIsOpen,
+          layoutColumnMenuOpenedViaKeyboard: nextIsOpen ? openedViaKeyboard !== null && openedViaKeyboard !== void 0 ? openedViaKeyboard : false : false,
+          layoutColumnMenuAnchorPos: nextIsOpen ? anchorPos : undefined,
+          dangerPreviewLayoutColumnPositions: nextIsOpen ? pluginState.dangerPreviewLayoutColumnPositions : undefined
+        });
+      }
+    case 'setDangerPreview':
+      return _objectSpread(_objectSpread({}, pluginState), {}, {
+        dangerPreviewLayoutColumnPositions: action.positions
+      });
+    case 'clearDangerPreview':
+      return _objectSpread(_objectSpread({}, pluginState), {}, {
+        dangerPreviewLayoutColumnPositions: undefined
+      });
+    case 'setResizeState':
+      return _objectSpread(_objectSpread({}, pluginState), {}, {
+        isResizing: action.isResizing
+      });
+    case 'syncSelectionState':
+      {
+        var maybeLayoutSection = getMaybeLayoutSection(action.state);
+        return _objectSpread(_objectSpread({}, pluginState), {}, {
+          pos: maybeLayoutSection ? maybeLayoutSection.pos : null,
+          selectedLayout: getSelectedLayout(maybeLayoutSection && maybeLayoutSection.node,
+          // Ignored via go/ees005
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          pluginState.selectedLayout)
+        });
+      }
+  }
+};
 
 // To prevent a single-column layout,
 // if a user attempts to delete a layout column and
@@ -116,28 +171,39 @@ export default (function (options, editorAnalyticsAPI) {
         return getInitialPluginState(options, state);
       },
       apply: function apply(tr, pluginState, oldState, newState) {
-        var _columnMenuMeta$isOpe, _tr$getMeta, _pluginKey$getState;
+        var _tr$getMeta, _pluginKey$getState;
+        var nextPluginState = pluginState;
         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,
-          layoutColumnMenuAnchorPos: columnMenuMeta.isOpen === false ? undefined : columnMenuMeta.anchorPos
-        }) : pluginState;
+        var dangerPreviewMeta = tr.getMeta('layoutColumnDangerPreview');
+        if (columnMenuMeta) {
+          nextPluginState = reduceLayoutColumnMenuState(nextPluginState, {
+            meta: columnMenuMeta,
+            type: 'toggleLayoutColumnMenu'
+          });
+        }
+        if (tr.getMeta('layoutColumnDangerPreview') !== undefined) {
+          nextPluginState = reduceLayoutColumnMenuState(nextPluginState, {
+            positions: dangerPreviewMeta !== null && dangerPreviewMeta !== void 0 ? dangerPreviewMeta : undefined,
+            type: 'setDangerPreview'
+          });
+        }
+        if (tr.docChanged) {
+          nextPluginState = reduceLayoutColumnMenuState(nextPluginState, {
+            type: 'clearDangerPreview'
+          });
+        }
         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;
+        nextPluginState = reduceLayoutColumnMenuState(nextPluginState, {
+          isResizing: isResizing,
+          type: 'setResizeState'
+        });
         if (tr.docChanged || tr.selectionSet) {
-          var maybeLayoutSection = getMaybeLayoutSection(newState);
-          var newPluginState = _objectSpread(_objectSpread({}, nextPluginState), {}, {
-            pos: maybeLayoutSection ? maybeLayoutSection.pos : null,
-            isResizing: isResizing,
-            selectedLayout: getSelectedLayout(maybeLayoutSection && maybeLayoutSection.node,
-            // Ignored via go/ees005
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            pluginState.selectedLayout)
+          return reduceLayoutColumnMenuState(nextPluginState, {
+            state: newState,
+            type: 'syncSelectionState'
           });
-          return newPluginState;
         }
-        return _objectSpread(_objectSpread({}, nextPluginState), {}, {
-          isResizing: isResizing
-        });
+        return nextPluginState;
       }
     },
     props: {
@@ -147,14 +213,17 @@ export default (function (options, editorAnalyticsAPI) {
         if (editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true) && isLayoutResizingPluginAvailable) {
           var dividerDecorations = getColumnDividerDecorations(state, editorViewRef, editorAnalyticsAPI);
           var selectedDecorations = layoutState.pos !== null ? getNodeDecoration(layoutState.pos, state.doc.nodeAt(layoutState.pos)) : [];
-          var allDecorations = [].concat(_toConsumableArray(selectedDecorations), _toConsumableArray(dividerDecorations));
+          var _dangerPreviewDecorations = getDangerPreviewDecorations(state, layoutState.dangerPreviewLayoutColumnPositions);
+          var allDecorations = [].concat(_toConsumableArray(selectedDecorations), _toConsumableArray(dividerDecorations), _toConsumableArray(_dangerPreviewDecorations));
           if (allDecorations.length > 0) {
             return DecorationSet.create(state.doc, allDecorations);
           }
           return undefined;
         }
-        if (layoutState.pos !== null) {
-          return DecorationSet.create(state.doc, getNodeDecoration(layoutState.pos, state.doc.nodeAt(layoutState.pos)));
+        var dangerPreviewDecorations = getDangerPreviewDecorations(state, layoutState.dangerPreviewLayoutColumnPositions);
+        if (layoutState.pos !== null || dangerPreviewDecorations.length > 0) {
+          var _selectedDecorations = layoutState.pos !== null ? getNodeDecoration(layoutState.pos, state.doc.nodeAt(layoutState.pos)) : [];
+          return DecorationSet.create(state.doc, [].concat(_toConsumableArray(_selectedDecorations), _toConsumableArray(dangerPreviewDecorations)));
         }
         return undefined;
       },

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

@@ -22,7 +22,7 @@ var findLayoutColumnsFromLayoutSection = function findLayoutColumnsFromLayoutSec
     };
   });
 };
-export var getSelectedLayoutColumnsFromSelection = function getSelectedLayoutColumnsFromSelection(selection) {
+var getSelectedLayoutColumns = function getSelectedLayoutColumns(selection, isColumnSelected) {
   var layoutSection = findLayoutSectionFromSelection(selection);
   if (!layoutSection) {
     return undefined;
@@ -35,17 +35,15 @@ export var getSelectedLayoutColumnsFromSelection = function getSelectedLayoutCol
   }
   var startIndex = -1;
   var endIndex = -1;
-  var selectedLayoutColumns = allLayoutColumns.filter(function (_ref2, index) {
-    var node = _ref2.node,
-      pos = _ref2.pos;
-    var isSelected = selection.from <= pos && selection.to >= pos + node.nodeSize;
-    if (isSelected) {
+  var selectedLayoutColumns = allLayoutColumns.filter(function (column, index) {
+    if (isColumnSelected(column, index)) {
       if (startIndex === -1) {
         startIndex = index;
       }
       endIndex = index;
+      return true;
     }
-    return isSelected;
+    return false;
   });
   return {
     layoutSectionNode: layoutSectionNode,
@@ -55,6 +53,32 @@ export var getSelectedLayoutColumnsFromSelection = function getSelectedLayoutCol
     endIndex: endIndex
   };
 };
+export var getSelectedLayoutColumnsFromSelection = function getSelectedLayoutColumnsFromSelection(selection) {
+  return getSelectedLayoutColumns(selection, function (_ref2) {
+    var node = _ref2.node,
+      pos = _ref2.pos;
+    // NodeSelection on a layout column is clearly selected.
+    if (selection instanceof NodeSelection && selection.node === node) {
+      return true;
+    }
+
+    // For TextSelection, only count columns that are fully contained within the selection
+    // (not partial text selections inside a column).
+    var nodeEndPos = pos + node.nodeSize;
+    return !selection.empty && selection.from <= pos && selection.to >= nodeEndPos;
+  });
+};
+export var getLayoutColumnsFromContentSelection = function getLayoutColumnsFromContentSelection(selection) {
+  return getSelectedLayoutColumns(selection, function (_ref3) {
+    var node = _ref3.node,
+      pos = _ref3.pos;
+    if (selection instanceof NodeSelection && selection.node === node) {
+      return true;
+    }
+    var nodeEndPos = pos + node.nodeSize;
+    return selection.empty ? selection.from > pos && selection.from < nodeEndPos : selection.from < nodeEndPos && selection.to > pos;
+  });
+};
 export var getAllLayoutColumnsFromSelection = function getAllLayoutColumnsFromSelection(selection) {
   var layoutSection = findLayoutSectionFromSelection(selection);
   if (!layoutSection) {
@@ -73,8 +97,8 @@ export var getAllLayoutColumnsFromSelection = function getAllLayoutColumnsFromSe
   };
 };
 export var getLayoutColumnValign = function getLayoutColumnValign(layoutColumn) {
-  var _ref3;
-  return layoutColumn ? (_ref3 = layoutColumn.attrs.valign) !== null && _ref3 !== void 0 ? _ref3 : 'top' : undefined;
+  var _ref4;
+  return layoutColumn ? (_ref4 = layoutColumn.attrs.valign) !== null && _ref4 !== void 0 ? _ref4 : 'top' : undefined;
 };
 export var getLayoutColumnMenuAnchorPos = function getLayoutColumnMenuAnchorPos(selection, anchorPosFromHandle) {
   var _clickedSelectedColum, _selectedLayoutColumn;
@@ -82,8 +106,8 @@ export var getLayoutColumnMenuAnchorPos = function getLayoutColumnMenuAnchorPos(
   if (!selectedLayoutColumns) {
     return undefined;
   }
-  var clickedSelectedColumn = selectedLayoutColumns.selectedLayoutColumns.find(function (_ref4) {
-    var pos = _ref4.pos;
+  var clickedSelectedColumn = selectedLayoutColumns.selectedLayoutColumns.find(function (_ref5) {
+    var pos = _ref5.pos;
     return pos === anchorPosFromHandle;
   });
   return (_clickedSelectedColum = clickedSelectedColumn === null || clickedSelectedColumn === void 0 ? void 0 : clickedSelectedColumn.pos) !== null && _clickedSelectedColum !== void 0 ? _clickedSelectedColum : (_selectedLayoutColumn = selectedLayoutColumns.selectedLayoutColumns[0]) === null || _selectedLayoutColumn === void 0 ? void 0 : _selectedLayoutColumn.pos;