@atlaskit/editor-plugin-layout 11.0.4 → 11.1.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-layout
 
+## 11.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 11.1.0
+
+### Minor Changes
+
+- [`5182f0ffac22f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5182f0ffac22f) -
+  Add keyboard shortcuts and danger preview to layout column menu actions.
+
+  Fix keyboard navigation in the layout column menu.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 11.0.4
 
 ### Patch Changes

package/dist/cjs/layoutPlugin.js

@@ -19,6 +19,7 @@ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _actions = require("./pm-plugins/actions");
+var _keymap = _interopRequireDefault(require("./pm-plugins/keymap"));
 var _main = _interopRequireDefault(require("./pm-plugins/main"));
 var _pluginKey = require("./pm-plugins/plugin-key");
 var _resizing = _interopRequireDefault(require("./pm-plugins/resizing"));
@@ -57,7 +58,7 @@ var selectIntoLayoutSection = exports.selectIntoLayoutSection = function selectI
   return tr;
 };
 var layoutPlugin = exports.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;
@@ -109,6 +110,16 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
           return (0, _main.default)(options, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
         }
       }];
+      if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
+        plugins.push({
+          name: 'layoutKeymap',
+          plugin: function plugin() {
+            return (0, _keymap.default)({
+              api: api
+            });
+          }
+        });
+      }
       if ((options.editorAppearance === 'full-page' || options.editorAppearance === 'full-width' || options.editorAppearance === 'max' && (0, _experiments.editorExperiment)('platform_editor_layout_column_resize_handle', true)) && api && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
         plugins.push({
           name: 'layoutResizing',
@@ -379,15 +390,19 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
       return _pluginKey.pluginKey.getState(editorState);
     },
     commands: {
-      deleteLayoutColumn: (0, _actions.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 (0, _actions.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 (0, _actions.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 (0, _actions.insertLayoutColumn)(side, api === null || api === void 0 || (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions, api);
+        return (0, _actions.insertLayoutColumn)(side, api === null || api === void 0 || (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions, api, inputMethod);
       },
+      setLayoutColumnDangerPreview: _actions.setLayoutColumnDangerPreview,
       setLayoutColumnValign: function setLayoutColumnValign(valign) {
         var _api$analytics8;
         return (0, _actions.setLayoutColumnValign)(valign, api === null || api === void 0 || (_api$analytics8 = api.analytics) === null || _api$analytics8 === void 0 ? void 0 : _api$analytics8.actions, api);

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.fixColumnStructure = exports.fixColumnSizes = exports.distributeLayoutColumns = exports.deleteLayoutColumn = exports.deleteActiveLayoutNode = exports.createMultiColumnLayoutSection = exports.createDefaultLayoutSection = exports.TWO_COL_LAYOUTS = exports.THREE_COL_LAYOUTS = exports.ONE_COL_LAYOUTS = exports.LAYOUT_COLUMN_INSERT_META = void 0;
 exports.forceSectionToPresetLayout = forceSectionToPresetLayout;
 exports.getEffectiveMaxLayoutColumns = getEffectiveMaxLayoutColumns;
-exports.toggleLayoutColumnMenu = exports.setPresetLayout = exports.setLayoutColumnValign = exports.insertLayoutColumnsWithAnalytics = exports.insertLayoutColumns = exports.insertLayoutColumn = exports.getSelectedLayout = exports.getPresetLayout = void 0;
+exports.toggleLayoutColumnMenu = exports.setPresetLayout = exports.setLayoutColumnValign = exports.setLayoutColumnDangerPreview = exports.insertLayoutColumnsWithAnalytics = exports.insertLayoutColumns = exports.insertLayoutColumn = exports.getSelectedLayout = exports.getPresetLayout = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _editorAnalytics = require("@atlaskit/editor-common/editor-analytics");
@@ -581,12 +581,13 @@ function getEffectiveMaxLayoutColumns() {
   return (0, _experiments.editorExperiment)('advanced_layouts', true) ? _consts.MAX_LAYOUT_COLUMNS : _consts.MAX_STANDARD_LAYOUT_COLUMNS;
 }
 var insertLayoutColumnAt = function insertLayoutColumnAt(side, editorAnalyticsAPI) {
+  var inputMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _analytics.INPUT_METHOD.LAYOUT_COLUMN_MENU;
   return function (_ref4) {
     var tr = _ref4.tr;
     if (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
       return null;
     }
-    var selectedLayoutColumnsResult = (0, _layoutColumnSelection.getSelectedLayoutColumnsFromSelection)(tr.selection);
+    var selectedLayoutColumnsResult = (0, _layoutColumnSelection.getLayoutColumnsFromContentSelection)(tr.selection);
     if (!selectedLayoutColumnsResult || selectedLayoutColumnsResult.selectedLayoutColumns.length === 0) {
       return null;
     }
@@ -646,7 +647,7 @@ var insertLayoutColumnAt = function insertLayoutColumnAt(side, editorAnalyticsAP
       attributes: {
         columnCount: redistributedWidths.length,
         endIndex: endIndex,
-        inputMethod: _analytics.INPUT_METHOD.LAYOUT_COLUMN_MENU,
+        inputMethod: inputMethod,
         selectedCount: selectedColumnCount,
         side: side,
         startIndex: startIndex
@@ -658,9 +659,10 @@ var insertLayoutColumnAt = function insertLayoutColumnAt(side, editorAnalyticsAP
   };
 };
 var insertLayoutColumn = exports.insertLayoutColumn = function insertLayoutColumn(side, editorAnalyticsAPI, api) {
+  var inputMethod = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _analytics.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) {
@@ -801,25 +803,43 @@ var distributeLayoutColumns = exports.distributeLayoutColumns = function distrib
 };
 var toggleLayoutColumnMenu = exports.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;
   };
 };
-var deleteLayoutColumn = exports.deleteLayoutColumn = function deleteLayoutColumn(editorAnalyticsAPI, api) {
+var setLayoutColumnDangerPreview = exports.setLayoutColumnDangerPreview = function setLayoutColumnDangerPreview(show) {
   return function (_ref13) {
-    var _api$blockControls4;
+    var _selectedLayoutColumn;
     var tr = _ref13.tr;
+    var selectedLayoutColumnsResult = (0, _layoutColumnSelection.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;
+  };
+};
+var deleteLayoutColumn = exports.deleteLayoutColumn = function deleteLayoutColumn(editorAnalyticsAPI, api) {
+  var inputMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _analytics.INPUT_METHOD.LAYOUT_COLUMN_MENU;
+  return function (_ref15) {
+    var _api$blockControls4;
+    var tr = _ref15.tr;
     if (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
       return null;
     }
-    var selectedLayoutColumnsResult = (0, _layoutColumnSelection.getSelectedLayoutColumnsFromSelection)(tr.selection);
+    var selectedLayoutColumnsResult = (0, _layoutColumnSelection.getLayoutColumnsFromContentSelection)(tr.selection);
     if (!selectedLayoutColumnsResult || selectedLayoutColumnsResult.selectedLayoutColumns.length === 0) {
       return null;
     }
@@ -836,7 +856,7 @@ var deleteLayoutColumn = exports.deleteLayoutColumn = function deleteLayoutColum
         attributes: {
           columnCount: columnCount,
           endIndex: endIndex,
-          inputMethod: _analytics.INPUT_METHOD.LAYOUT_COLUMN_MENU,
+          inputMethod: inputMethod,
           selectedCount: selectedLayoutColumns.length,
           startIndex: startIndex
         },

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

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _actions = require("./actions");
+var bindLayoutColumnShortcut = function bindLayoutColumnShortcut(shortcut, command, list) {
+  if (!shortcut) {
+    return;
+  }
+  (0, _keymaps.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(_keymaps.addColumnBefore.common, (0, _actions.insertLayoutColumn)('left', api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api, _analytics.INPUT_METHOD.KEYBOARD), list);
+  bindLayoutColumnShortcut(_keymaps.addColumnBeforeVO.common, (0, _actions.insertLayoutColumn)('left', api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api, _analytics.INPUT_METHOD.KEYBOARD), list);
+  bindLayoutColumnShortcut(_keymaps.addColumnAfter.common, (0, _actions.insertLayoutColumn)('right', api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, api, _analytics.INPUT_METHOD.KEYBOARD), list);
+  bindLayoutColumnShortcut(_keymaps.addColumnAfterVO.common, (0, _actions.insertLayoutColumn)('right', api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions, api, _analytics.INPUT_METHOD.KEYBOARD), list);
+  bindLayoutColumnShortcut(_keymaps.deleteColumn.common, (0, _actions.deleteLayoutColumn)(api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, api, _analytics.INPUT_METHOD.KEYBOARD), list);
+  return (0, _keymaps.keymap)(list);
+}
+var _default = exports.default = keymapPlugin;

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

@@ -59,6 +59,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 [_view2.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 = (0, _utils3.getMaybeLayoutSection)(state);
   var allowBreakout = options.allowBreakout || false;
@@ -74,9 +86,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 = (0, _utils3.getMaybeLayoutSection)(action.state);
+        return _objectSpread(_objectSpread({}, pluginState), {}, {
+          pos: maybeLayoutSection ? maybeLayoutSection.pos : null,
+          selectedLayout: (0, _actions.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
@@ -123,28 +178,39 @@ var _default = exports.default = function _default(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 = (0, _experiments.editorExperiment)('single_column_layouts', true) ? (_tr$getMeta = tr.getMeta('is-resizer-resizing')) !== null && _tr$getMeta !== void 0 ? _tr$getMeta : (_pluginKey$getState = _pluginKey.pluginKey.getState(oldState)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.isResizing : false;
+        nextPluginState = reduceLayoutColumnMenuState(nextPluginState, {
+          isResizing: isResizing,
+          type: 'setResizeState'
+        });
         if (tr.docChanged || tr.selectionSet) {
-          var maybeLayoutSection = (0, _utils3.getMaybeLayoutSection)(newState);
-          var newPluginState = _objectSpread(_objectSpread({}, nextPluginState), {}, {
-            pos: maybeLayoutSection ? maybeLayoutSection.pos : null,
-            isResizing: isResizing,
-            selectedLayout: (0, _actions.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: {
@@ -154,14 +220,17 @@ var _default = exports.default = function _default(options, editorAnalyticsAPI)
         if ((0, _experiments.editorExperiment)('advanced_layouts', true) && (0, _experiments.editorExperiment)('platform_editor_layout_column_resize_handle', true) && isLayoutResizingPluginAvailable) {
           var dividerDecorations = (0, _columnResizeDivider.getColumnDividerDecorations)(state, editorViewRef, editorAnalyticsAPI);
           var selectedDecorations = layoutState.pos !== null ? getNodeDecoration(layoutState.pos, state.doc.nodeAt(layoutState.pos)) : [];
-          var allDecorations = [].concat((0, _toConsumableArray2.default)(selectedDecorations), (0, _toConsumableArray2.default)(dividerDecorations));
+          var _dangerPreviewDecorations = getDangerPreviewDecorations(state, layoutState.dangerPreviewLayoutColumnPositions);
+          var allDecorations = [].concat((0, _toConsumableArray2.default)(selectedDecorations), (0, _toConsumableArray2.default)(dividerDecorations), (0, _toConsumableArray2.default)(_dangerPreviewDecorations));
           if (allDecorations.length > 0) {
             return _view2.DecorationSet.create(state.doc, allDecorations);
           }
           return undefined;
         }
-        if (layoutState.pos !== null) {
-          return _view2.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 _view2.DecorationSet.create(state.doc, [].concat((0, _toConsumableArray2.default)(_selectedDecorations), (0, _toConsumableArray2.default)(dangerPreviewDecorations)));
         }
         return undefined;
       },

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSelectedLayoutColumnsFromSelection = exports.getLayoutColumnValign = exports.getLayoutColumnMenuAnchorPos = exports.getAllLayoutColumnsFromSelection = void 0;
+exports.getSelectedLayoutColumnsFromSelection = exports.getLayoutColumnsFromContentSelection = exports.getLayoutColumnValign = exports.getLayoutColumnMenuAnchorPos = exports.getAllLayoutColumnsFromSelection = void 0;
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var findLayoutSectionFromSelection = function findLayoutSectionFromSelection(selection) {
@@ -28,7 +28,7 @@ var findLayoutColumnsFromLayoutSection = function findLayoutColumnsFromLayoutSec
     };
   });
 };
-var getSelectedLayoutColumnsFromSelection = exports.getSelectedLayoutColumnsFromSelection = function getSelectedLayoutColumnsFromSelection(selection) {
+var getSelectedLayoutColumns = function getSelectedLayoutColumns(selection, isColumnSelected) {
   var layoutSection = findLayoutSectionFromSelection(selection);
   if (!layoutSection) {
     return undefined;
@@ -41,17 +41,15 @@ var getSelectedLayoutColumnsFromSelection = exports.getSelectedLayoutColumnsFrom
   }
   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,
@@ -61,6 +59,32 @@ var getSelectedLayoutColumnsFromSelection = exports.getSelectedLayoutColumnsFrom
     endIndex: endIndex
   };
 };
+var getSelectedLayoutColumnsFromSelection = exports.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 _state.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;
+  });
+};
+var getLayoutColumnsFromContentSelection = exports.getLayoutColumnsFromContentSelection = function getLayoutColumnsFromContentSelection(selection) {
+  return getSelectedLayoutColumns(selection, function (_ref3) {
+    var node = _ref3.node,
+      pos = _ref3.pos;
+    if (selection instanceof _state.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;
+  });
+};
 var getAllLayoutColumnsFromSelection = exports.getAllLayoutColumnsFromSelection = function getAllLayoutColumnsFromSelection(selection) {
   var layoutSection = findLayoutSectionFromSelection(selection);
   if (!layoutSection) {
@@ -79,8 +103,8 @@ var getAllLayoutColumnsFromSelection = exports.getAllLayoutColumnsFromSelection
   };
 };
 var getLayoutColumnValign = exports.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;
 };
 var getLayoutColumnMenuAnchorPos = exports.getLayoutColumnMenuAnchorPos = function getLayoutColumnMenuAnchorPos(selection, anchorPosFromHandle) {
   var _clickedSelectedColum, _selectedLayoutColumn;
@@ -88,8 +112,8 @@ var getLayoutColumnMenuAnchorPos = exports.getLayoutColumnMenuAnchorPos = functi
   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;

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

@@ -7,25 +7,37 @@ Object.defineProperty(exports, "__esModule", {
 exports.DeleteColumnDropdownItem = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _useSelectedLayoutColumns = require("./useSelectedLayoutColumns");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var DeleteColumnDropdownItem = exports.DeleteColumnDropdownItem = function DeleteColumnDropdownItem(_ref) {
+  var _tooltip;
   var api = _ref.api;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var selectedLayoutColumns = (0, _useSelectedLayoutColumns.useSelectedLayoutColumns)(api);
+  var setDangerPreview = (0, _react.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 = (0, _react.useCallback)(function () {
+    setDangerPreview(true);
+  }, [setDangerPreview]);
+  var hideDangerPreview = (0, _react.useCallback)(function () {
+    setDangerPreview(false);
+  }, [setDangerPreview]);
   var onClick = (0, _react.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
@@ -38,11 +50,19 @@ var DeleteColumnDropdownItem = exports.DeleteColumnDropdownItem = function Delet
   }
   var selectedColumnCount = selectedLayoutColumns.selectedLayoutColumns.length;
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    ariaKeyshortcuts: (0, _keymaps.getAriaKeyshortcuts)(_keymaps.deleteColumn),
     onClick: onClick,
+    onFocus: showDangerPreview,
+    onMouseEnter: showDangerPreview,
+    onBlur: hideDangerPreview,
+    onMouseLeave: hideDangerPreview,
     elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.DeleteIcon, {
       color: "currentColor",
       label: "",
       size: "small"
+    }),
+    elemAfter: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
+      shortcut: (_tooltip = (0, _keymaps.tooltip)(_keymaps.deleteColumn)) !== null && _tooltip !== void 0 ? _tooltip : ''
     })
   }, formatMessage(_messages.layoutMessages.deleteColumn, {
     count: selectedColumnCount

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.InsertColumnDropdownItem = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _actions = require("../../pm-plugins/actions");
@@ -25,7 +26,7 @@ var INSERT_COLUMN_OPTIONS = {
   }
 };
 var InsertColumnDropdownItem = exports.InsertColumnDropdownItem = function InsertColumnDropdownItem(_ref) {
-  var _selectedLayoutColumn, _selectedLayoutColumn2;
+  var _selectedLayoutColumn, _selectedLayoutColumn2, _tooltip;
   var api = _ref.api,
     side = _ref.side;
   var _useIntl = (0, _reactIntl.useIntl)(),
@@ -33,6 +34,7 @@ var InsertColumnDropdownItem = exports.InsertColumnDropdownItem = function Inser
   var _INSERT_COLUMN_OPTION = INSERT_COLUMN_OPTIONS[side],
     Icon = _INSERT_COLUMN_OPTION.Icon,
     label = _INSERT_COLUMN_OPTION.label;
+  var shortcut = side === 'left' ? _keymaps.addColumnBefore : _keymaps.addColumnAfter;
   var selectedLayoutColumns = (0, _useSelectedLayoutColumns.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 = (0, _actions.getEffectiveMaxLayoutColumns)();
@@ -58,11 +60,15 @@ var InsertColumnDropdownItem = exports.InsertColumnDropdownItem = function Inser
     return null;
   }
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    ariaKeyshortcuts: (0, _keymaps.getAriaKeyshortcuts)(shortcut),
     elemBefore: /*#__PURE__*/_react.default.createElement(Icon, {
       color: "currentColor",
       label: "",
       size: "small"
     }),
+    elemAfter: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
+      shortcut: (_tooltip = (0, _keymaps.tooltip)(shortcut)) !== null && _tooltip !== void 0 ? _tooltip : ''
+    }),
     onClick: onClick
   }, formatMessage(label));
 };