@atlaskit/editor-plugin-layout 11.0.4 → 11.1.1

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

@@ -6,9 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.LayoutColumnMenu = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _bindEventListener = require("bind-event-listener");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _uiReact = require("@atlaskit/editor-common/ui-react");
 var _userIntent = require("@atlaskit/editor-common/user-intent");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -21,6 +23,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var PopupWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_ui.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.
@@ -38,6 +41,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(_styles.DRAG_HANDLE_SELECTOR);
 };
+var focusTrap = {
+  initialFocus: undefined
+};
 var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.memo(function LayoutColumnMenu(_ref) {
   var _api$uiControlRegistr, _api$uiControlRegistr2;
   var api = _ref.api,
@@ -46,15 +52,17 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
     boundariesElement = _ref.boundariesElement,
     scrollableElement = _ref.scrollableElement;
   var _useSharedPluginState = (0, _hooks.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 = (0, _react.useCallback)(function () {
     var _api$core, _api$layout;
@@ -63,7 +71,7 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
     }));
   }, [api]);
   var handleClickOutside = (0, _react.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;
     }
 
@@ -80,6 +88,38 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
       closeLayoutColumnMenu();
     }
   }, [closeLayoutColumnMenu]);
+  var handleArrowKeyNavigationClose = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
+    closeLayoutColumnMenu();
+  }, [closeLayoutColumnMenu]);
+  var shouldDisableArrowKeyNavigation = (0, _react.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 = (0, _react.useRef)(null);
+  var handleMenuKeyDown = (0, _react.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();
+    }
+  }, []);
+  (0, _react.useEffect)(function () {
+    var menuWrapper = menuWrapperRef.current;
+    if (!isLayoutColumnMenuOpen || !menuWrapper) {
+      return;
+    }
+    return (0, _bindEventListener.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(_keys.LAYOUT_COLUMN_MENU.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
   var target = (0, _react.useMemo)(function () {
     return isLayoutColumnMenuOpen ? getLayoutColumnMenuTarget(editorView, selection, layoutColumnMenuAnchorPos) : null;
@@ -104,16 +144,23 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
     stick: true,
     offset: LAYOUT_COLUMN_MENU_POPUP_OFFSET,
     handleClickOutside: handleClickOutside,
-    handleEscapeKeydown: closeLayoutColumnMenu
+    handleEscapeKeydown: closeLayoutColumnMenu,
+    focusTrap: openedViaKeyboard ? focusTrap : undefined
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: menuWrapperRef
   }, /*#__PURE__*/_react.default.createElement(_userIntent.UserIntentPopupWrapper, {
     api: api,
     userIntent: "layoutColumnMenuPopupOpen"
   }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenuProvider, {
     isOpen: isLayoutColumnMenuOpen,
     setIsOpen: handleSetIsOpen
+  }, /*#__PURE__*/_react.default.createElement(_uiMenu.ArrowKeyNavigationProvider, {
+    type: _uiMenu.ArrowKeyNavigationType.MENU,
+    handleClose: handleArrowKeyNavigationClose,
+    disableArrowKeyNavigation: shouldDisableArrowKeyNavigation
   }, /*#__PURE__*/_react.default.createElement(_editorUiControlModel.SurfaceRenderer, {
     components: components,
     fallbacks: _components.LAYOUT_COLUMN_MENU_FALLBACKS,
     surface: _keys.LAYOUT_COLUMN_MENU
-  }))));
+  }))))));
 });

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

@@ -19,6 +19,13 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 
 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 = (0, _react2.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 ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
     return (0, _react2.css)((0, _defineProperty2.default)({}, "".concat(PLACEHOLDER_SELECTOR), {
@@ -56,7 +63,10 @@ var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWra
     var placeholderText = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? _messages.layoutMessages.controlslayoutPlaceholder : _messages.layoutMessages.layoutPlaceholder;
     return getPlaceholderStyle(formatMessage(placeholderText));
   }, [formatMessage]);
+  var globalStyles = (0, _react.useMemo)(function () {
+    return [placeholderStyle, layoutColumnDangerPreviewStyle];
+  }, [placeholderStyle]);
   return (0, _react2.jsx)(_react2.Global, {
-    styles: placeholderStyle
+    styles: globalStyles
   });
 };

package/dist/es2019/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, insertLayoutColumn, insertLayoutColumnsWithAnalytics, setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
+import { createDefaultLayoutSection, createMultiColumnLayoutSection, deleteLayoutColumn, distributeLayoutColumns, insertLayoutColumn, insertLayoutColumnsWithAnalytics, setLayoutColumnDangerPreview, 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';
@@ -52,7 +53,7 @@ export const layoutPlugin = ({
   config: options = {},
   api
 }) => {
-  var _api$analytics2, _api$analytics5;
+  var _api$analytics2;
   const allowAdvancedSingleColumnLayout = editorExperiment('advanced_layouts', true) && editorExperiment('single_column_layouts', true, {
     exposure: true
   });
@@ -101,6 +102,14 @@ export const layoutPlugin = ({
           return createLayoutPlugin(options, api === null || api === void 0 ? 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: () => createLayoutKeymapPlugin({
+            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',
@@ -353,15 +362,19 @@ export const layoutPlugin = ({
       return pluginKey.getState(editorState);
     },
     commands: {
-      deleteLayoutColumn: deleteLayoutColumn(api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, api),
+      deleteLayoutColumn: inputMethod => {
+        var _api$analytics5;
+        return deleteLayoutColumn(api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, api, inputMethod);
+      },
       distributeLayoutColumns: options => {
         var _api$analytics6;
         return distributeLayoutColumns(api === null || api === void 0 ? void 0 : (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions, api)(options);
       },
-      insertLayoutColumn: side => {
+      insertLayoutColumn: (side, inputMethod) => {
         var _api$analytics7;
-        return insertLayoutColumn(side, api === null || api === void 0 ? 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 ? void 0 : (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions, api, inputMethod);
       },
+      setLayoutColumnDangerPreview,
       setLayoutColumnValign: valign => {
         var _api$analytics8;
         return setLayoutColumnValign(valign, api === null || api === void 0 ? void 0 : (_api$analytics8 = api.analytics) === null || _api$analytics8 === void 0 ? void 0 : _api$analytics8.actions, api);

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

@@ -11,7 +11,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 const ONE_COL_LAYOUTS = ['single'];
 export const TWO_COL_LAYOUTS = ['two_equal', 'two_left_sidebar', 'two_right_sidebar'];
 export const THREE_COL_LAYOUTS = ['three_equal', 'three_with_sidebars'];
@@ -556,13 +556,13 @@ const mapLayoutColumnPreservedSelection = (tr, api) => {
 export function getEffectiveMaxLayoutColumns() {
   return editorExperiment('advanced_layouts', true) ? MAX_LAYOUT_COLUMNS : MAX_STANDARD_LAYOUT_COLUMNS;
 }
-const insertLayoutColumnAt = (side, editorAnalyticsAPI) => ({
+const insertLayoutColumnAt = (side, editorAnalyticsAPI, inputMethod = INPUT_METHOD.LAYOUT_COLUMN_MENU) => ({
   tr
 }) => {
   if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
     return null;
   }
-  const selectedLayoutColumnsResult = getSelectedLayoutColumnsFromSelection(tr.selection);
+  const selectedLayoutColumnsResult = getLayoutColumnsFromContentSelection(tr.selection);
   if (!selectedLayoutColumnsResult || selectedLayoutColumnsResult.selectedLayoutColumns.length === 0) {
     return null;
   }
@@ -624,7 +624,7 @@ const insertLayoutColumnAt = (side, editorAnalyticsAPI) => ({
     attributes: {
       columnCount: redistributedWidths.length,
       endIndex,
-      inputMethod: INPUT_METHOD.LAYOUT_COLUMN_MENU,
+      inputMethod,
       selectedCount: selectedColumnCount,
       side,
       startIndex
@@ -634,10 +634,10 @@ const insertLayoutColumnAt = (side, editorAnalyticsAPI) => ({
   tr.setMeta('scrollIntoView', false);
   return tr;
 };
-export const insertLayoutColumn = (side, editorAnalyticsAPI, api) => ({
+export const insertLayoutColumn = (side, editorAnalyticsAPI, api, inputMethod = INPUT_METHOD.LAYOUT_COLUMN_MENU) => ({
   tr
 }) => {
-  const result = insertLayoutColumnAt(side, editorAnalyticsAPI)({
+  const result = insertLayoutColumnAt(side, editorAnalyticsAPI, inputMethod)({
     tr
   });
   if (result) {
@@ -777,25 +777,40 @@ export const distributeLayoutColumns = (editorAnalyticsAPI, api) => ({
 };
 export const toggleLayoutColumnMenu = ({
   anchorPos,
-  isOpen
+  isOpen,
+  openedViaKeyboard
 }) => ({
   tr
 }) => {
   tr.setMeta('toggleLayoutColumnMenu', {
     anchorPos,
-    isOpen
+    isOpen,
+    openedViaKeyboard
   });
   tr.setMeta('scrollIntoView', false);
   return tr;
 };
-export const deleteLayoutColumn = (editorAnalyticsAPI, api) => ({
+export const setLayoutColumnDangerPreview = show => ({
+  tr
+}) => {
+  var _selectedLayoutColumn;
+  const selectedLayoutColumnsResult = getSelectedLayoutColumnsFromSelection(tr.selection);
+  const positions = show ? (_selectedLayoutColumn = selectedLayoutColumnsResult === null || selectedLayoutColumnsResult === void 0 ? void 0 : selectedLayoutColumnsResult.selectedLayoutColumns.map(({
+    pos
+  }) => pos)) !== null && _selectedLayoutColumn !== void 0 ? _selectedLayoutColumn : [] : null;
+  tr.setMeta('layoutColumnDangerPreview', positions);
+  tr.setMeta('addToHistory', false);
+  tr.setMeta('scrollIntoView', false);
+  return tr;
+};
+export const deleteLayoutColumn = (editorAnalyticsAPI, api, inputMethod = INPUT_METHOD.LAYOUT_COLUMN_MENU) => ({
   tr
 }) => {
   var _api$blockControls4;
   if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
     return null;
   }
-  const selectedLayoutColumnsResult = getSelectedLayoutColumnsFromSelection(tr.selection);
+  const selectedLayoutColumnsResult = getLayoutColumnsFromContentSelection(tr.selection);
   if (!selectedLayoutColumnsResult || selectedLayoutColumnsResult.selectedLayoutColumns.length === 0) {
     return null;
   }
@@ -814,7 +829,7 @@ export const deleteLayoutColumn = (editorAnalyticsAPI, api) => ({
       attributes: {
         columnCount,
         endIndex,
-        inputMethod: INPUT_METHOD.LAYOUT_COLUMN_MENU,
+        inputMethod,
         selectedCount: selectedLayoutColumns.length,
         startIndex
       },

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

@@ -0,0 +1,26 @@
+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';
+const bindLayoutColumnShortcut = (shortcut, command, list) => {
+  if (!shortcut) {
+    return;
+  }
+  bindKeymapWithEditorCommand(shortcut, command, list);
+};
+
+/**
+ * Creates shortcut handlers for layout column actions.
+ */
+function keymapPlugin({
+  api
+}) {
+  var _api$analytics, _api$analytics2, _api$analytics3, _api$analytics4, _api$analytics5;
+  const list = {};
+  bindLayoutColumnShortcut(addColumnBefore.common, insertLayoutColumn('left', api === null || api === void 0 ? 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 ? 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 ? 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 ? 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 ? 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/es2019/pm-plugins/main.js

@@ -53,6 +53,18 @@ const moveCursorToNextColumn = (state, dispatch) => {
 const getNodeDecoration = (pos, node) => [Decoration.node(pos, pos + node.nodeSize, {
   class: 'selected'
 })];
+const getDangerPreviewDecorations = (state, positions) => {
+  var _positions$flatMap;
+  return (_positions$flatMap = positions === null || positions === void 0 ? void 0 : positions.flatMap(pos => {
+    const 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 : [];
+};
 const getInitialPluginState = (options, state) => {
   const maybeLayoutSection = getMaybeLayoutSection(state);
   const allowBreakout = options.allowBreakout || false;
@@ -68,9 +80,58 @@ const getInitialPluginState = (options, state) => {
     allowSingleColumnLayout,
     isResizing: false,
     isLayoutColumnMenuOpen: false,
-    layoutColumnMenuAnchorPos: undefined
+    layoutColumnMenuOpenedViaKeyboard: false,
+    layoutColumnMenuAnchorPos: undefined,
+    dangerPreviewLayoutColumnPositions: undefined
   };
 };
+const reduceLayoutColumnMenuState = (pluginState, action) => {
+  switch (action.type) {
+    case 'toggleLayoutColumnMenu':
+      {
+        const {
+          anchorPos,
+          isOpen,
+          openedViaKeyboard
+        } = action.meta;
+        const nextIsOpen = isOpen !== null && isOpen !== void 0 ? isOpen : !pluginState.isLayoutColumnMenuOpen;
+        return {
+          ...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 {
+        ...pluginState,
+        dangerPreviewLayoutColumnPositions: action.positions
+      };
+    case 'clearDangerPreview':
+      return {
+        ...pluginState,
+        dangerPreviewLayoutColumnPositions: undefined
+      };
+    case 'setResizeState':
+      return {
+        ...pluginState,
+        isResizing: action.isResizing
+      };
+    case 'syncSelectionState':
+      {
+        const maybeLayoutSection = getMaybeLayoutSection(action.state);
+        return {
+          ...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
@@ -115,31 +176,39 @@ export default ((options, editorAnalyticsAPI) => {
     state: {
       init: (_, state) => getInitialPluginState(options, state),
       apply: (tr, pluginState, oldState, newState) => {
-        var _columnMenuMeta$isOpe, _tr$getMeta, _pluginKey$getState;
+        var _tr$getMeta, _pluginKey$getState;
+        let nextPluginState = pluginState;
         const columnMenuMeta = tr.getMeta('toggleLayoutColumnMenu');
-        const nextPluginState = columnMenuMeta ? {
-          ...pluginState,
-          isLayoutColumnMenuOpen: (_columnMenuMeta$isOpe = columnMenuMeta.isOpen) !== null && _columnMenuMeta$isOpe !== void 0 ? _columnMenuMeta$isOpe : !pluginState.isLayoutColumnMenuOpen,
-          layoutColumnMenuAnchorPos: columnMenuMeta.isOpen === false ? undefined : columnMenuMeta.anchorPos
-        } : pluginState;
+        const 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'
+          });
+        }
         const isResizing = editorExperiment('single_column_layouts', true) ? (_tr$getMeta = tr.getMeta('is-resizer-resizing')) !== null && _tr$getMeta !== void 0 ? _tr$getMeta : (_pluginKey$getState = pluginKey.getState(oldState)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.isResizing : false;
+        nextPluginState = reduceLayoutColumnMenuState(nextPluginState, {
+          isResizing,
+          type: 'setResizeState'
+        });
         if (tr.docChanged || tr.selectionSet) {
-          const maybeLayoutSection = getMaybeLayoutSection(newState);
-          const newPluginState = {
-            ...nextPluginState,
-            pos: maybeLayoutSection ? maybeLayoutSection.pos : null,
-            isResizing,
-            selectedLayout: getSelectedLayout(maybeLayoutSection && maybeLayoutSection.node,
-            // Ignored via go/ees005
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            pluginState.selectedLayout)
-          };
-          return newPluginState;
+          return reduceLayoutColumnMenuState(nextPluginState, {
+            state: newState,
+            type: 'syncSelectionState'
+          });
         }
-        return {
-          ...nextPluginState,
-          isResizing
-        };
+        return nextPluginState;
       }
     },
     props: {
@@ -149,14 +218,17 @@ export default ((options, editorAnalyticsAPI) => {
         if (editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true) && isLayoutResizingPluginAvailable) {
           const dividerDecorations = getColumnDividerDecorations(state, editorViewRef, editorAnalyticsAPI);
           const selectedDecorations = layoutState.pos !== null ? getNodeDecoration(layoutState.pos, state.doc.nodeAt(layoutState.pos)) : [];
-          const allDecorations = [...selectedDecorations, ...dividerDecorations];
+          const dangerPreviewDecorations = getDangerPreviewDecorations(state, layoutState.dangerPreviewLayoutColumnPositions);
+          const allDecorations = [...selectedDecorations, ...dividerDecorations, ...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)));
+        const dangerPreviewDecorations = getDangerPreviewDecorations(state, layoutState.dangerPreviewLayoutColumnPositions);
+        if (layoutState.pos !== null || dangerPreviewDecorations.length > 0) {
+          const selectedDecorations = layoutState.pos !== null ? getNodeDecoration(layoutState.pos, state.doc.nodeAt(layoutState.pos)) : [];
+          return DecorationSet.create(state.doc, [...selectedDecorations, ...dangerPreviewDecorations]);
         }
         return undefined;
       },

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

@@ -22,7 +22,7 @@ const findLayoutColumnsFromLayoutSection = (layoutSectionNode, layoutSectionPos
     pos: pos + layoutSectionPos + 1
   }));
 };
-export const getSelectedLayoutColumnsFromSelection = selection => {
+const getSelectedLayoutColumns = (selection, isColumnSelected) => {
   const layoutSection = findLayoutSectionFromSelection(selection);
   if (!layoutSection) {
     return undefined;
@@ -37,18 +37,15 @@ export const getSelectedLayoutColumnsFromSelection = selection => {
   }
   let startIndex = -1;
   let endIndex = -1;
-  const selectedLayoutColumns = allLayoutColumns.filter(({
-    node,
-    pos
-  }, index) => {
-    const isSelected = selection.from <= pos && selection.to >= pos + node.nodeSize;
-    if (isSelected) {
+  const selectedLayoutColumns = allLayoutColumns.filter((column, index) => {
+    if (isColumnSelected(column, index)) {
       if (startIndex === -1) {
         startIndex = index;
       }
       endIndex = index;
+      return true;
     }
-    return isSelected;
+    return false;
   });
   return {
     layoutSectionNode,
@@ -58,6 +55,34 @@ export const getSelectedLayoutColumnsFromSelection = selection => {
     endIndex
   };
 };
+export const getSelectedLayoutColumnsFromSelection = selection => {
+  return getSelectedLayoutColumns(selection, ({
+    node,
+    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).
+    const nodeEndPos = pos + node.nodeSize;
+    return !selection.empty && selection.from <= pos && selection.to >= nodeEndPos;
+  });
+};
+export const getLayoutColumnsFromContentSelection = selection => {
+  return getSelectedLayoutColumns(selection, ({
+    node,
+    pos
+  }) => {
+    if (selection instanceof NodeSelection && selection.node === node) {
+      return true;
+    }
+    const nodeEndPos = pos + node.nodeSize;
+    return selection.empty ? selection.from > pos && selection.from < nodeEndPos : selection.from < nodeEndPos && selection.to > pos;
+  });
+};
 export const getAllLayoutColumnsFromSelection = selection => {
   const layoutSection = findLayoutSectionFromSelection(selection);
   if (!layoutSection) {

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

@@ -1,25 +1,37 @@
 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';
 const DeleteColumnDropdownItem = ({
   api
 }) => {
+  var _tooltip;
   const {
     formatMessage
   } = useIntl();
   const selectedLayoutColumns = useSelectedLayoutColumns(api);
+  const setDangerPreview = useCallback(show => {
+    var _api$core, _api$layout;
+    api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.setLayoutColumnDangerPreview(show));
+  }, [api]);
+  const showDangerPreview = useCallback(() => {
+    setDangerPreview(true);
+  }, [setDangerPreview]);
+  const hideDangerPreview = useCallback(() => {
+    setDangerPreview(false);
+  }, [setDangerPreview]);
   const onClick = useCallback(() => {
-    var _api$layout, _api$core;
-    const deleteCommand = api === null || api === void 0 ? void 0 : (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.deleteLayoutColumn;
-    api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(props => {
-      var _api$layout2;
+    var _api$layout2, _api$core2;
+    const deleteCommand = api === null || api === void 0 ? void 0 : (_api$layout2 = api.layout) === null || _api$layout2 === void 0 ? void 0 : _api$layout2.commands.deleteLayoutColumn();
+    api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(props => {
+      var _api$layout3;
       const 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 ? void 0 : (_api$layout2 = api.layout) === null || _api$layout2 === void 0 ? void 0 : _api$layout2.commands.toggleLayoutColumnMenu({
+      api === null || api === void 0 ? void 0 : (_api$layout3 = api.layout) === null || _api$layout3 === void 0 ? void 0 : _api$layout3.commands.toggleLayoutColumnMenu({
         isOpen: false
       })({
         tr
@@ -32,11 +44,19 @@ const DeleteColumnDropdownItem = ({
   }
   const 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